在保留其内容的同时交换<div>
在保留其内容的同时交换<div>
提问于 2016-10-08 08:13:50
我试图在一个jQuery-based vertical splitter中交换两个DIVs，每一端都包含一个网站，同时保留页面内部的状态。我不能在这里附加拆分器，因为它需要一个离线的插件库，但我认为这对这个问题的目的并不重要。代码如下：
<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视频。当用户单击“交换”按钮时，我希望在不重新加载youtube视频的情况下交换两个iframe。虽然我的代码能够交换两个div，但它总是刷新页面并重新加载视频。我还没能想出如何解决这个问题。我们将非常感谢您的任何意见。谢谢。
回答 1
Stack Overflow用户
发布于 2016-10-08 08:36:43
可以使用分离，然后重新附加。
我还添加了要分离到的容器div。
在代码片段中使用IFrame会导致问题，因此假设我使用了INPUT，例如，如果您在代码片段中键入内容，然后翻转。您将看到文本没有被清除，证明它不是重新加载到DOM中，而是移动它。
更新：
好的，看起来像是在移动iFrames，因为分离/连接确实会导致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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39927382
复制相关文章
相似问题
腾讯云开发者
