在保留其内容的同时交换 <div>答案

【问题标题】：Swapping <div> while retaining its contents在保留其内容的同时交换 <div>
【发布时间】：2017-02-17 01:14:16
【问题描述】：

我正在尝试在jQuery-based vertical splitter 中交换两个 DIV，每一侧都包含一个网站，同时保留页面内的状态。我无法在此处附加拆分器，因为它需要一个离线插件库，但我认为这对于这个问题的目的并不重要。代码如下：

<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 视频。当用户单击“交换”按钮时，我希望交换两个 iframe 而无需重新加载 youtube 视频。虽然我的代码能够交换两个 div，但它总是刷新页面并重新加载视频。我一直无法弄清楚如何解决这个问题。任何输入将不胜感激。谢谢。

【问题讨论】：

标签： javascript jquery html dom iframe

【解决方案1】：

您可以使用分离，然后重新附加。

我还添加了要分离的容器 div。

在 sn-p 中使用 IFrame 会导致问题，因此假设我使用了 INPUT，例如，如果您在其中输入一些内容，然后翻转。你会看到你的文本没有清除，证明它没有重新加载到 DOM 中，而只是移动它。

更新：

好的，看起来像移动 iFrame，因为分离/附加确实会导致 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>

【讨论】：

谢谢基思。我尝试了你的实现，在 sn-p 中似乎很好，结果在 DOM 树中移动任何包含 iframe 对象的
总是会导致 iframe 内容的刷新。我看到“adoptNode”应该解决这个问题，但它不起作用。

function myFunction(){ var x = document.adoptNode(document.getElementById("test1")); document.getElementById("test2").appendChild(x); }
看起来确实在移动 iFrame 会导致刷新。但是，如果您在 DOM 内部不移动的情况下移动东西，那么没关系.. 刚刚进行了修改以使用似乎可以正常工作的 Flexbox。更新了我的 sn-p。