看一下这个简单的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的事件/变量/等保持不变?
发布于 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);
发布于 2016-10-06 19:59:17
此答案与@djechlin的赏金有关
我在w3/dom规范上搜索了很多次,没有找到任何明确说明iframe应该在DOM树中移动时重新加载的东西,但是我在webkit的trac/bugzilla/microsoft中找到了很多关于这些年来不同行为变化的参考和评论。
我希望有人能找到关于这个问题的任何具体信息,但现在是我的发现:
当你对现有的behavior".
appendChild(node)
操作时,这个node
首先会从dom中被移除。有趣的是- IE<=8
没有重新加载iframe -这个行为注释是(某种程度上)新的注释(因为IE>=9
).
当将iframe元素插入到具有浏览上下文的文档中时,用户代理必须创建一个新的浏览上下文,将元素的嵌套浏览上下文设置为新创建的浏览上下文,然后为“第一次”处理iframe属性。
这是我在规范中发现的最接近的东西,但是它仍然需要一些解释(因为当我们在DOM中移动iframe
元素时,我们并不真正执行完整的remove
,即使浏览器使用node.removeChild
方法)。
发布于 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
复制相似问题