我需要创建一个页面，允许用户将页面的某个部分“解锁”成一个新窗口，然后将其移动到第二个显示器上，并能够将该部分“重新锁定”到主页面。在解锁和锁定时，该部分需要保持其状态和事件监听器。解决方案可以使用Javascript或jQuery。
我已经成功地在Chrome和Firefox中通过将DOM对象附加到新窗口来实现这一点。但是，根据这篇广为流传的帖子，IE显然不允许您这样做：在IE和Edge中调用adoptNode和importNode会失败。在IE中，我遇到了这个错误：JS5022 以下是我的当前尝试，使用.html方法，在IE中似乎有效，但我意识到我失去了所有的事件监听器。
这里有一个代码片段： https://jsfiddle.net/esharri2/4tj1zv9m/
我已经成功地在Chrome和Firefox中通过将DOM对象附加到新窗口来实现这一点。但是，根据这篇广为流传的帖子，IE显然不允许您这样做：在IE和Edge中调用adoptNode和importNode会失败。在IE中，我遇到了这个错误：JS5022 以下是我的当前尝试，使用.html方法，在IE中似乎有效，但我意识到我失去了所有的事件监听器。
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script src="lab.js"></script>
</head>
<body>
<div id="A">
<h3>Div A</h3>
<input type="text" name="fname" placeholder="test">
<br>
<button id="popinout">Pop in/out</button>
</div>
<div id="B">
<h3>Div B</h3>
</div>
</body>var docked = true;
var floatWindow;
$("#popinout").click(function() {
console.log(docked);
if (docked == true) {
undock();
} else {
dock();
}
});
var dock = function() {
docked = true;
//Left over from approach where I was trying to copy DOM elements.
$("body").prepend($("#A", floatWindow.document));
floatWindow.close();
};
var undock = function() {
docked = false;
floatWindow = window.open("", "", "menubar=no, toolbar=no, titlebar=no, location=no, resizable=yes");
var head = $("head").clone().html();
var tmp = document.createElement("div");
var divA = $(tmp).append($("#A")).html();
//css does not load without this open / close (do not know why)
floatWindow.document.open();
floatWindow.document.close();
$("head", floatWindow.document).append(head);
$("body", floatWindow.document).append(divA);
floatWindow.onbeforeunload = function() {
dock();
};
};
这里有一个代码片段： https://jsfiddle.net/esharri2/4tj1zv9m/