Question

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

＆＃13;

<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>

＆＃13;

假设用户正在iframe A中播放youtube视频。当用户点击＆＃34; swap＆＃34;按钮，我想交换两个iframe而不重新加载youtube视频。虽然我的代码能够交换两个div，但它总是刷新页面并重新加载视频。我还没有弄清楚如何解决这个问题。任何输入将不胜感激。谢谢。

Answer 1

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

我还添加了容器div来分离。

在代码段内使用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>

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

1 个答案: