Есть ли способ повторно привязать & lt; iframe / & gt; узел к другому родительскому узлу, не вызывая повторной передачи iframe? [Дубликат]

Всякий раз, когда iframe добавляется и применяется атрибут src, он запускает действие загрузки аналогично созданию тега изображения через JS. Поэтому, когда вы удаляете и добавляете их, они являются совершенно новыми объектами, и они обновляются. Его вид того, как window.location = window.location перезагрузит страницу.

Единственный способ, которым я знаю переставить iframes, - через CSS. Вот пример, который я собрал, показывая один способ справиться с этим с помощью flex-box: https://jsfiddle.net/3g73sz3k/15/

Основная идея - создать a flex-box, а затем определить определенный порядок для iframes, используя атрибут 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, эти стили order являются встроенными, чтобы упростить flip, поэтому поверните iframes.

Я получил решение из этого вопроса StackOverflow: Поменять место DIV с помощью CSS только

Надеюсь, что помогает.

Этот ответ связан с щедростью by @djechlin

. Многие поиски по спецификациям w3 / dom и не нашли ничего окончательного, что конкретно говорит о том, что iframe должен перезагружаться при перемещении в дереве DOM, однако в течение нескольких лет я нашел множество ссылок и комментариев в trac / bugzilla / microsoft webkit относительно различных изменений поведения.

Надеюсь, что кто-то найдет что-то конкретное в отношении этого вопрос, но на данный момент вот мои выводы:

1. Согласно Ryosuke Niwa - «Это ожидаемое поведение».
2. magic iframe "( webkit, 2010 ), но он был удален в 2012 году .
3. Согласно MS -« ресурсы iframe освобождаются, когда удалены из DOM ". Когда вы appendChild(node) существующего узла, - node сначала удаляется из dom. Интересная вещь здесь - IE<=8 не перезагружает iframe - это поведение (несколько) новое (поскольку IE>=9).
4. Согласно комментарию Hallvord RM Steen , это - это цитата из спецификаций ifgram . Когда элемент iframe вставлен в документ, в котором есть контекст просмотра, пользовательский агент должен создать новый контекст просмотра, установить контекстный контекст просмотра элемента в недавно созданный контекст просмотра, а затем обрабатывать атрибуты iframe для «первого раза». Это самая близкая вещь, которую я нашел в спецификациях, однако она по-прежнему требует некоторой интерпретации (поскольку, когда мы перемещаем элемент iframe в DOM, мы действительно не делаем полного remove, даже если браузеры используют node.removeChild).

В ответ на щедрость @djechlin, поставленную на этот вопрос, я разветвил jsfiddle, отправленный @ matt-h, и пришел к выводу, что это все еще невозможно.

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);
}

Если вы используете iframe для доступа к страницам, которые вы управляете, вы можете создать некоторый javascript, чтобы позволить вашему родителю общаться с iframe через postMessage

. Там вы можете создать логин внутри iframe для записи изменения состояния и перед перемещением dom, запросите это как объект json.

После перемещения iframe перезагрузится, вы можете передать данные состояния в iframe, и прослушивание iframe может анализировать данные обратно в предыдущее состояние.

К сожалению, свойство parentNode элемента HTML DOM доступно только для чтения. Конечно, вы можете отрегулировать позиции фреймов, но вы не можете изменить их местоположение в DOM и сохранить их состояния.

См. Этот jsfiddle, который я создал, который обеспечивает хорошую тестовую кровать. http://jsfiddle.net/RpHTj/1/

Нажмите на поле, чтобы переключить значение. Нажмите «move», чтобы запустить javascript.

Если вы создали iFrame на странице и вам просто нужно переместить его позицию, попробуйте этот подход:

Добавить iFrame в тело и использовать высокий индекс z и верхний, левый, ширины , высота для размещения iFrame, где вы хотите.

Даже CSS-масштабирование работает на теле без перезагрузки, что является удивительным!

Я поддерживаю два состояния для своего «виджета», и это либо

Это полезно, когда другой контент или библиотеки будут хлюпать или раздавить ваш iFrame.

BOOM!

Этот вопрос довольно старый ... но я нашел способ переместить iframe без его перезагрузки. Только CSS. У меня есть несколько iframe с потоками камеры, мне не нравится, когда они перезагружаются, когда меняют их. Поэтому я использовал комбинацию float, position: absolute и некоторых фиктивных блоков для их перемещения без перезагрузки и с желаемым расположением по требованию (изменение размера и все).