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

【问题标题】：How to move an iFrame in the DOM without losing its state?如何在 DOM 中移动 iFrame 而不会丢失其状态？
【发布时间】：2012-01-09 05:39:14
【问题描述】：

看看这个简单的 HTML：

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

假设我想移动换行符，使#wrap2 位于#wrap1 之前。 iframe 被 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 会...改变。此变量和点击事件应在 iFrame 移动后保留（以及已启动的任何其他变量/事件）

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

【问题讨论】：

之前（很久以前）问过 -> stackoverflow.com/questions/2885504/… 和 stackoverflow.com/questions/3029871/…
Mozilla 提出的当前错误 ...bugzilla.mozilla.org/show_bug.cgi?id=254144
@ManseUK：其他问题并没有真正帮助......但这个错误很有趣。
@SalmanA 如何让父母“围绕”孩子？
@denodster 当我打开这个问题时，想要的效果是改变元素列表的顺序，每个元素都带有inline-block 显示......在这一点上，我猜一个通用的考虑到他人的利益，解决方案（或实际上是不可能的声明）将是最合适的。

标签： javascript jquery dom iframe

【解决方案1】：

如果不重新加载，就无法将 iframe 从 dom 中的一个位置移动到另一个位置。

下面是一个示例，说明即使使用原生 JavaScript，iFrame 仍会重新加载： http://jsfiddle.net/pZ23B/

var wrap1 = document.getElementById('wrap1');
var wrap2 = document.getElementById('wrap2');
setTimeout(function(){
    document.getElementsByTagName('body')[0].appendChild(wrap1);
},10000);

【讨论】：

好吧，如果 iFrame 重新加载，那么它不是一个选项。
对，这个例子的目的是展示即使使用原生 JavaScript，iFrame 仍然会重新加载。
嗯，实际上，我真的不在乎它是否重新加载，因为它们的位置是about:blank，但我关心的是丢失框架内的内容。
如果它重新加载，会导致它丢失 iframe 中的内容。我想您可以在使用 jquery $("#iframeid").contents() 移动 iframe 之前获取 iframe 中的内容，但是这不会获取存储的 javascript 数据，它必须由 iframe 发送到父页面。（或者父页面必须从 iframe 中抓取）
DelightedD0D，赏金是由@djechlin 打开的——“我想知道这在 2016 年是否仍然如此”，看看过去 5 年在这个问题上是否有任何变化。您可以查看我的回答中关于这些年的变化的摘要。

【解决方案2】：

这个答案与@djechlin 的赏金有关

在 w3/dom 规范上进行了大量搜索，但没有找到任何明确说明 iframe 在 DOM 树中移动时应该重新加载的内容，但是我确实在 webkit 的 trac/bugzilla 中找到了很多引用和 cmets /microsoft 关于这些年来不同的行为变化。

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

根据Ryosuke Niwa - “这是预期的行为”。
有一个“神奇的 iframe”(webkit, 2010)，但它是 removed in 2012。
根据 MS -“iframe resources are freed when removed from the DOM”。当您 appendChild(node) 现有节点时 - 首先从 dom 中删除 node。
这里很有趣 - IE<=8 没有重新加载 iframe - 这种行为（有点）新（自 IE>=9 以来）。
根据Hallvord R. M. Steen的评论，这是iframe specs的引用

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

这是我在规范中找到的最接近的东西，但是它仍然需要一些解释（因为当我们在 DOM 中移动 iframe 元素时，我们并没有真正做完整的 remove，即使浏览器使用node.removeChild 方法）。

【讨论】：

将感谢投票者的回复并提供解释。
真的希望在 dom 中有通过引用传递，这样你就可以在多个位置拥有相同的元素

【解决方案3】：

每当附加 iframe 并应用 src 属性时，它都会触发加载操作，类似于通过 JS 创建图像标签时。因此，当您删除然后附加它们时，它们是全新的实体并且它们会刷新。 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

希望对您有所帮助。

【讨论】：

第 1 段的赏金并解释它类似于 img 并创建新实体。不是css：P
如此简单有效！非常感谢！
哈利路亚！我花了很长时间才找到这个，这正是我想要做的，只需重新排列框架。

【解决方案4】：

如果您已经在页面上创建了 iFrame，并且稍后只需要移动它的位置，请尝试以下方法：

将 iFrame 附加到正文并使用高 z-index 和 top,left,width,height 将 iFrame 放置在您想要的位置。

即使 CSS 缩放也可以在 body 上工作而无需重新加载，这太棒了！

我为我的“小部件”维护两种状态，它要么被注入到 DOM 中，要么使用这种方法注入到主体中。

当其他内容或库将挤压或挤压您的 iFrame 时，这很有用。

轰隆隆！

【讨论】：

【解决方案5】：

不幸的是，HTML DOM 元素的parentNode 属性是只读的。当然，您可以调整 iframe 的位置，但不能更改它们在 DOM 中的位置并保留它们的状态。

查看我创建的这个 jsfiddle，它提供了一个很好的测试平台。 http://jsfiddle.net/RpHTj/1/

单击框以切换值。点击“移动”运行javascript。

【讨论】：

【解决方案6】：

这个问题已经很老了......但我确实找到了一种无需重新加载即可移动 iframe 的方法。仅限 CSS。我有多个带有相机流的 iframe，我不喜欢在交换它们时重新加载它们。因此，我使用了浮动、位置：绝对和一些虚拟块的组合来移动它们，而无需重新加载它们并按需拥有所需的布局（调整大小和所有）。

【讨论】：

听起来是唯一可行的选择。您应该发布您提出的完整解决方案！至少有一些基本代码可以让其他人开始。谢谢！

【解决方案7】：

如果您使用 iframe 访问您控制的页面，您可以创建一些 javascript 以允许您的父级通过 postMessage 与 iframe 通信

从那里，您可以在 iframe 中构建登录以记录状态更改，并在移动 dom 之前，将其作为 json 对象请求。

一旦移动，iframe 将重新加载，您可以将状态数据传递到 iframe，iframe 监听可以将数据解析回之前的状态。

【讨论】：

当然，这是很多代码，假设您控制将在框架中显示的所有数据，但从技术上讲仍然不能“在 DOM 中移动时保持状态”

【解决方案8】：

PaulSCoder 有正确的解决方案。切勿为此目的操纵 DOM。对此的经典方法是在点击事件中设置一个相对位置并“翻转”这些位置。将 click 事件放在 body 上是不明智的，因为它也会从其他元素中冒泡。

$("body").click(function () {
    var frame1Height = $(frame1).outerHeight(true);
    var frame2Height = $(frame2).outerHeight(true);
    var pos = $(frame1).css("top");
    if (pos === "0px") {
        $(frame1).css("top", frame2Height);
        $(frame2).css("top", -frame1Height);
    } else {
        $(frame1).css("top", 0);
        $(frame2).css("top", 0);
    }
});

如果您只有非跨域内容，您可以保存和恢复 HTML：

var htmlContent = $(frame).contents().find("html").children();
// do something
$(frame).contents().find("html").html(htmlContent);

第一种方法的优点是，框架继续做它正在做的事情。使用第二种方法，框架被重新加载并再次启动它的代码。

【讨论】：

【解决方案9】：

为了回应@djechlin 在这个问题上的赏金，我已经分叉了@matt-h 发布的 jsfiddle 并得出结论，这仍然是不可能的。

http://jsfiddle.net/gr3wo9u6/

//this does not work, the frames reload when appended back to the DOM
function swapFrames() {
    var w1 = document.getElementById('wrap1');
    var w2 = document.getElementById('wrap2');
    var f1 = w1.querySelector('iframe');
    var f2 = w2.querySelector('iframe');

    w1.removeChild(f1);
    w2.removeChild(f2);
    w1.appendChild(f2);
    w2.appendChild(f1);
    //f1.parentNode = w2;
    //f2.parentNode = w1;

    //alert(f1.parentNode.id);
}

【讨论】：