Блог

Главная - Вопросы по программированию - Замена с сохранением его содержимого

Замена с сохранением его содержимого

#javascript #jquery #html #dom #iframe

#javascript #jquery #HTML #dom #iframe

Вопрос:

Я пытаюсь поменять местами два раздела в вертикальном разделителе на основе jQuery, каждая сторона содержит веб-сайт, сохраняя при этом состояние внутри страницы. Я не могу прикрепить разделитель здесь, потому что для этого требуется автономная библиотека плагинов, но я не думаю, что это имеет большое значение для целей этого вопроса. Вот код:

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

Предполагается, что пользователь воспроизводит видео YouTube в iframe A. Когда пользователь нажимает кнопку «поменять местами», я хочу поменять местами два iframe без перезагрузки видео на YouTube. Хотя мой код может менять местами два div, он всегда обновляет страницу и перезагружает видео. Я не смог понять, как решить эту проблему. Любой ввод будет высоко оценен. Спасибо.

Ответ №1:

Вы можете использовать отсоединение, а затем повторно присоединить.

Я также добавил контейнерные div для отсоединения.

Использование IFrame внутри фрагмента вызывает проблемы, поэтому для pretend я использовал ВХОДНЫЕ данные, например, если вы вводите что-то в один, а затем переворачиваете. Вы увидите, что текст не очищается, доказывая, что он не загружается повторно в DOM, а просто перемещается.

Обновить:

Хорошо, похоже, что перемещение iFrames из-за отсоединения / присоединения действительно вызывает обновление 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>

Комментарии:

1. Спасибо, Кит. Я попробовал вашу реализацию, она выглядит нормально во фрагменте, оказывается, перемещение любого <div>, содержащего объект iframe, в дереве DOM всегда приводит к обновлению содержимого iframe. Я видел, что «adoptNode» должен решить эту проблему, но это не работает. <div> <iframe id=»test1″ src=»AA.html «></iframe> </div> <div> <идентификатор iframe=»test2» src=»BB.html «></iframe> </div> функция myFunction(){ var x = document.adoptNode(document.getElementById(«test1»)); document.getElementById(«test2»).appendChild(x); }

2. Похоже, что действительно перемещение iFrame вызывает обновление. Но если вы перемещаете вещи, не перемещаясь внутри DOM, тогда все в порядке .. Просто внес изменения в использование Flexbox, который, похоже, работает нормально. Обновлен мой фрагмент.