如何在不丢失状态的情况下在DOM中移动iFrame？
看一下这个简单的HTML：
<div id="wrap1">
<iframe id="iframe1"></iframe>
</div>
<div id="warp2">
<iframe id="iframe2"></iframe>
</div>假设我想移动包装，这样#wrap2就会在#wrap1之前。iframes被JavaScript污染。我知道jQuery的.insertAfter()和.insertBefore()。但是，当我使用它们时，iFrame会丢失所有的HTML、JavaScript变量和事件。
假设下面是iFrame的HTML：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// The variable below would change on click
// This represents changes on variables after the code is loaded
// These changes should remain after the iFrame is moved
variableThatChanges = false;
$(function(){
$("body").click(function(){
variableThatChanges = true;
});
});
</script>
</head>
<body>
<div id='anything'>Illustrative Example</div>
</body>
</html>在上面的代码中，如果用户在主体上单击，则变量variableThatChanges为would...change。此变量和单击事件应在iFrame移动后保留(以及已启动的任何其他变量/事件)
我的问题如下：使用JavaScript (使用或不使用jQuery)，我如何移动DOM中的包装节点(以及它们的iframe子代)，以便iFrame的窗口保持不变，iFrame的事件/变量/等保持不变？
回答 9
Stack Overflow用户
发布于 2011-11-30 06:06:34
在不重新加载的情况下，无法将iframe从dom中的一个位置移动到另一个位置。
下面的示例展示了即使使用原生JavaScript，iFrames仍然会重新加载：http://jsfiddle.net/pZ23B/
var wrap1 = document.getElementById('wrap1');
var wrap2 = document.getElementById('wrap2');
setTimeout(function(){
document.getElementsByTagName('body')[0].appendChild(wrap1);
},10000);Stack Overflow用户
发布于 2016-10-06 19:59:17
此答案与@djechlin的赏金有关
我在w3/dom规范上搜索了很多次，没有找到任何明确说明iframe应该在DOM树中移动时重新加载的东西，但是我在webkit的trac/bugzilla/microsoft中找到了很多关于这些年来不同行为变化的参考和评论。
我希望有人能找到关于这个问题的任何具体信息，但现在是我的发现：
当你对现有的behavior".
- There执行
appendChild(node)操作时，这个node首先会从dom中被移除。
有趣的是- IE<=8没有重新加载iframe -这个行为注释是(某种程度上)新的注释(因为IE>=9).
- According to Hallvord R. M. Steen ，这是从iframe specs中引用的
当将iframe元素插入到具有浏览上下文的文档中时，用户代理必须创建一个新的浏览上下文，将元素的嵌套浏览上下文设置为新创建的浏览上下文，然后为“第一次”处理iframe属性。
这是我在规范中发现的最接近的东西，但是它仍然需要一些解释(因为当我们在DOM中移动iframe元素时，我们并不真正执行完整的remove，即使浏览器使用node.removeChild方法)。
Stack Overflow用户
发布于 2016-10-12 19:46:54
无论何时附加iframe并应用了src属性，它都会触发一个加载操作，这与通过JS创建Image标记时类似。因此，当您删除并附加它们时，它们是全新的实体，它们会刷新。这就是window.location = window.location重新加载页面的方式。
我所知道的重新定位iframes的唯一方法是通过CSS。下面是我放在一起的一个示例，展示了使用flex-box处理此问题的一种方法：https://jsfiddle.net/3g73sz3k/15/
基本思想是创建一个flex-box包装器，然后使用每个iframe包装器上的order属性定义iframe的特定顺序。
<style>
.container{
display: flex;
flex-direction: column;
}
</style>
<div class="container">
<div id="wrap1" style="order: 0" class="iframe-wrapper">
<iframe id="iframe1" src="https://google.com"></iframe>
</div>
<div id="warp2" style="order: 1" class="iframe-wrapper">
<iframe id="iframe2" src="https://bing.com"></iframe>
</div>
</div>正如您在JS fiddle中看到的，这些order样式是内联的，以简化flip按钮，因此旋转iframes。
我从这个StackOverflow问题中获得了解决方案：Swap DIV position with CSS only
希望这能有所帮助。
https://stackoverflow.com/questions/8318264
复制相似问题