在保留其内容的同时交换 <div>
Posted
技术标签:
【中文标题】在保留其内容的同时交换 <div>【英文标题】：Swapping <div> while retaining its contents 【发布时间】：2017-02-17 01:14:16 【问题描述】：我正在尝试在jQuery-based vertical splitter 中交换两个 DIV，每一侧都包含一个网站，同时保留页面内的状态。我无法在此处附加拆分器，因为它需要一个离线插件库，但我认为这对于这个问题的目的并不重要。代码如下：
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<button onclick="myFunction()">swap</button>
<div id="MySplitter">
<div class="first">
<p>A</p><iframe src="https://www.youtube.com/watch?v=QLhlCwhENzc/"></iframe>
</div>
<div class="second">
<p>B</p><iframe src="https://www.google.com/maps"></iframe>
</div>
</div>
<script>
function myFunction()
var tempContent = $("div.first").html();
$("div.first").empty().html($("div.second").html());
$("div.second").empty().html(tempContent);
</script>
</body>
</html>假设用户正在 iframe A 中播放 youtube 视频。当用户单击“交换”按钮时，我希望交换两个 iframe 而无需重新加载 youtube 视频。虽然我的代码能够交换两个 div，但它总是刷新页面并重新加载视频。我一直无法弄清楚如何解决这个问题。任何输入将不胜感激。谢谢。
【问题讨论】：
【参考方案1】：您可以使用分离，然后重新附加。
我还添加了要分离的容器 div。
在 sn-p 中使用 IFrame 会导致问题，因此假设我使用了 INPUT，例如，如果您在其中输入一些内容，然后翻转。你会看到你的文本没有清除，证明它没有重新加载到 DOM 中，而只是移动它。
更新：
好的，看起来像移动 iFrame，因为分离/附加确实会导致 iFrame 刷新。所以最好的选择是不要在 DOM 内移动，这个版本是使用 flexbox 来移动 IFrame 的。我想你可以使用绝对定位、浮动等。
function myFunction()
$('#MySplitter').toggleClass('flip');
$('button').click(myFunction);#MySplitter
display: flex;
flex-direction: column;
#MySplitter.flip
flex-direction: column-reverse;
.frame2
background-color: red;
iframe
width: 100%;
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<button>swap</button>
<div id="MySplitter">
<div class="content">
<iframe src="."></iframe>
</div>
<div class="content">
<iframe class="frame2" src="."></iframe>
</div>
</div>
</body>
</html>【讨论】：
谢谢基思。我尝试了你的实现，在 sn-p 中似乎很好，结果在 DOM 树中移动任何包含 iframe 对象的 总是会导致 iframe 内容的刷新。我看到“adoptNode”应该解决这个问题，但它不起作用。 function myFunction() var x = document.adoptNode(document.getElementById("test1")); document.getElementById("test2").appendChild(x); 看起来确实在移动 iFrame 会导致刷新。但是，如果您在 DOM 内部不移动的情况下移动东西，那么没关系.. 刚刚进行了修改以使用似乎可以正常工作的 Flexbox。更新了我的 sn-p。以上是关于在保留其内容的同时交换 <div>的主要内容，如果未能解决你的问题，请参考以下文章
js点击一个div控制另一个div内容的显示与隐藏同时小图标也要切换状态，页面有好几个这样的div。