如何在DOM中移动iFrame而不会失去其状态？

javascript dom jquery iframe

2022-08-30 05:38:37

看看这个简单的HTML：

<div id="wrap1">
  <iframe id="iframe1"></iframe>
</div>
<div id="warp2">
  <iframe id="iframe2"></iframe>
</div>

假设我想移动包装，以便将在 .iframe被JavaScript污染了。我知道jQuery的和.但是，当我使用这些时，iFrame会丢失其所有HTML以及JavaScript变量和事件。#wrap2#wrap1.insertAfter().insertBefore()

假设以下是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>

在上面的代码中，变量将...更改用户是否单击正文。此变量和单击事件应在移动 iFrame 后保留（以及已启动的任何其他变量/事件）variableThatChanges

我的问题是这样的：使用JavaScript（带或不带jQuery），我如何移动DOM中的包装节点（及其iframe子级），以便iFrame的窗口保持不变，iFrame的事件/变量/等保持不变？

答案 1

如果不重新加载，就不可能将 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);

答案 2

这个答案与@djechlin

在w3 / dom规范上进行大量搜索，没有找到任何最终结果，明确指出在DOM树中移动时应该重新加载iframe，但是我确实在webkit的trac / bugzilla / microsoft中发现了许多关于多年来不同行为变化的参考和评论。

我希望有人能找到关于这个问题的任何具体信息，但现在这是我的发现：

根据丹羽凉介的说法 - “这是预期的行为”。
有一个“magic iframe”（webkit，2010），但它在2012年被删除。
根据 MS - “从 DOM 中删除时，iframe 资源将被释放”。当你的现有节点 - 首先从 dom 中删除时。
有趣的是，这里没有重新加载 iframe - 此行为（在某种程度上）是新的（自）。appendChild(node)nodeIE<=8IE>=9
根据Hallvord R. M. Steen的评论，这是来自iframe规范的引用

将 iframe 元素插入到具有浏览上下文的文档中时，用户代理必须创建新的浏览上下文，将元素的嵌套浏览上下文设置为新创建的浏览上下文，然后“首次”处理 iframe 属性。

这是我在规范中发现的最接近的东西，但是它仍然需要一些解释（因为当我们在DOM中移动元素时，即使浏览器使用该方法，我们也不会真正执行完整的操作）。iframeremovenode.removeChild