我需要创建一个页面，允许用户将页面的一部分“取消停靠”到新窗口中，他们可以将其移动到第二个显示器，然后能够将该部分“重新停靠”到主页。取消停靠的部分在停靠和取消停靠时需要维护其状态和事件监听器。解决方案可以是 Javascript 或 jQuery。
只需将 DOM 对象附加到新窗口，我就可以在 Chrome 和 Firefox 中完美地工作。但 IE 显然不允许你这样做，根据这个记录充分的帖子:Calling adoptNode and importNode on a child window fails in IE and Edge 。我在 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();
};
};
这是一个 fiddle : https://jsfiddle.net/esharri2/4tj1zv9m/
最佳答案
我认为你应该做的是:
- 通过 ajax(小部件等)使该组件/部分可用
- 在“主页”上使用ajax加载
- 创建仅包含该部分的单独 html 页面，并通过查询参数传递其状态。这是您在弹出/新窗口中使用的页面。
这样您就可以单独使用相同的组件/部分或将其包含到其他页面。
如果您的组件非常复杂(大量数据)，您可以例如将组件状态发送到服务器，为该数据创建一些唯一的散列，然后使用该散列在弹出窗口中从服务器加载数据。
关于javascript - 将 DOM 元素移动到新窗口并在 IE 11 中维护事件监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38804772/