Bagaimana cara memindahkan iFrame di DOM tanpa kehilangan statusnya?

Question 1

Lihatlah HTML sederhana ini:

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

Katakanlah saya ingin memindahkan wraps sehingga #wrap2akan menjadi sebelum #wrap1. Iframe tercemar oleh JavaScript. Saya tahu tentang jQuery .insertAfter()dan .insertBefore(). Namun, saat saya menggunakannya, iFrame kehilangan semua HTML, variabel, dan peristiwa JavaScript.

Katakanlah berikut ini adalah HTML iFrame:

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

Pada kode di atas, variabel variableThatChangesakan ... berubah jika pengguna mengklik body. Variabel ini, dan peristiwa klik, harus tetap ada setelah iFrame dipindahkan (bersama dengan variabel / peristiwa lain yang telah dimulai)

Pertanyaan saya adalah sebagai berikut: dengan JavaScript (dengan atau tanpa jQuery), bagaimana saya bisa memindahkan simpul bungkus di DOM (dan anak iframe mereka) sehingga jendela iFrame tetap sama, dan acara / variabel / dll iFrame tetap sama?

Question 2

Tidak mungkin memindahkan iframe dari satu tempat di dom ke tempat lain tanpa memuat ulang.

Berikut adalah contoh yang menunjukkan bahwa meskipun menggunakan JavaScript asli, iFrame masih memuat ulang: http://jsfiddle.net/pZ23B/

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

Question 3

Jawaban ini terkait dengan bounty oleh @djechlin

Banyak pencarian di spesifikasi w3 / dom dan tidak menemukan sesuatu yang final yang secara khusus mengatakan bahwa iframe harus dimuat ulang saat bergerak di pohon DOM, namun saya menemukan banyak referensi dan komentar di trac / bugzilla / microsoft webkit tentang perubahan perilaku yang berbeda selama bertahun-tahun.

Saya berharap seseorang akan menemukan sesuatu yang spesifik tentang masalah ini, tetapi untuk saat ini inilah temuan saya:

Menurut Ryosuke Niwa - "Itulah perilaku yang diharapkan".
Ada "iframe ajaib" ( webkit, 2010 ), tapi dihapus pada 2012 .
Menurut MS - " sumber daya iframe dibebaskan saat dihapus dari DOM ". Ketika Anda appendChild(node)dari node yang ada - yang nodepertama dihapus dari dom.
Hal yang menarik di sini - IE<=8tidak memuat ulang iframe - perilaku ini (agak) baru (sejak IE>=9).
Menurut komentar Hallvord RM Steen , ini adalah kutipan dari spesifikasi iframe

Saat elemen iframe dimasukkan ke dalam dokumen yang memiliki konteks penelusuran, agen pengguna harus membuat konteks penelusuran baru, menyetel konteks penelusuran bertingkat elemen tersebut ke konteks penelusuran yang baru dibuat, lalu memproses atribut iframe untuk "pertama kali. " .

Ini adalah hal paling dekat yang saya temukan di spesifikasi, namun masih memerlukan beberapa interpretasi (karena ketika kita memindahkan iframeelemen di DOM kita tidak benar-benar melakukan sepenuhnya remove, bahkan jika browser menggunakan node.removeChildmetode tersebut).

Question 4

Setiap kali iframe ditambahkan dan memiliki atribut src yang diterapkan, itu mengaktifkan tindakan pemuatan yang mirip dengan saat membuat tag Gambar melalui JS. Jadi, saat Anda menghapus dan menambahkannya, mereka adalah entitas yang benar-benar baru dan menyegarkan. Ini semacam bagaimana window.location = window.locationakan memuat ulang halaman.

Satu-satunya cara yang saya tahu untuk memposisikan ulang iframesadalah melalui CSS. Berikut adalah contoh yang saya kumpulkan untuk menunjukkan satu cara untuk menangani ini dengan flex-box: https://jsfiddle.net/3g73sz3k/15/

Ide dasarnya adalah membuat flex-boxpembungkus dan kemudian menentukan urutan khusus untuk iframe menggunakan atribut pesanan pada setiap pembungkus 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>

Seperti yang Anda lihat di biola JS, ordergaya ini sejajar untuk menyederhanakan fliptombol jadi putar iframes.

Saya mengambil solusi dari pertanyaan StackOverflow ini: Tukar posisi DIV dengan CSS saja

Semoga membantu.

Question 5

Jika Anda telah membuat iFrame di halaman dan hanya perlu memindahkan posisinya nanti, coba pendekatan ini:

Tambahkan iFrame ke badan dan gunakan indeks-z tinggi dan atas, kiri, lebar, tinggi untuk meletakkan iFrame di tempat yang Anda inginkan.

Bahkan zoom CSS bekerja pada tubuh tanpa memuat ulang yang luar biasa!

Saya mempertahankan dua status untuk "widget" saya dan itu disuntikkan di tempat di DOM atau ke tubuh menggunakan metode ini.

Ini berguna ketika konten atau pustaka lain akan menekan atau menekan iFrame Anda.

LEDAKAN!

Question 6

Sayangnya, parentNodeproperti elemen HTML DOM bersifat hanya baca. Anda tentu saja dapat menyesuaikan posisi iframe, tetapi Anda tidak dapat mengubah lokasinya di DOM dan mempertahankan statusnya.

Lihat jsfiddle yang saya buat yang menyediakan test bed yang bagus. http://jsfiddle.net/RpHTj/1/

Klik pada kotak untuk mengubah nilainya. Klik pada "pindah" untuk menjalankan javascript.

Question 7

Pertanyaan ini cukup lama ... tetapi saya menemukan cara untuk memindahkan iframe tanpa memuat ulang. Hanya CSS. Saya memiliki banyak iframe dengan aliran kamera, saya tidak suka ketika mereka memuat ulang ketika saya menukarnya. Jadi saya menggunakan kombinasi float, position: absolute, dan beberapa dummy blok untuk memindahkannya tanpa memuat ulang dan memiliki tata letak yang diinginkan sesuai permintaan (mengubah ukuran dan semuanya).

Question 8

Menanggapi bounty @djechlin yang ditempatkan pada pertanyaan ini, saya telah mengubah jsfiddle yang diposting oleh @ matt-h dan sampai pada kesimpulan bahwa ini masih tidak mungkin.

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

Question 9

Jika Anda menggunakan iframe untuk mengakses halaman yang Anda kontrol, Anda dapat membuat beberapa javascript agar orang tua Anda dapat berkomunikasi dengan iframe melalui postMessage

Dari sana, Anda bisa membuat login di dalam iframe untuk merekam perubahan status, dan sebelum memindahkan dom, memintanya sebagai objek json.

Setelah dipindahkan, iframe akan dimuat ulang, Anda dapat meneruskan data status ke iframe dan mendengarkan iframe dapat mengurai data kembali ke status sebelumnya.