Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Mengubah Saiz iFrame Secara Dinamik Berdasarkan Kandungan Merentas Domainnya?

Bagaimanakah Saya Boleh Mengubah Saiz iFrame Secara Dinamik Berdasarkan Kandungan Merentas Domainnya?

Patricia Arquette
Lepaskan: 2024-12-30 10:26:10
asal
1021 orang telah melayarinya

How Can I Dynamically Resize an iFrame Based on its Cross-Domain Content?

Mengubah saiz iFrame Berdasarkan Kandungan: Menavigasi Komunikasi Merentas Domain

Memahami Cabaran Merentas Domain

Apabila memaparkan kandungan daripada domain luaran dalam iFrames , dasar asal yang sama menimbulkan cabaran dalam mengubah saiz iFrames tersebut secara dinamik untuk menampung kandungan.

Strategi Pemelingan

Satu teknik untuk memintas sekatan merentas domain melibatkan mengeksploitasi keanehan penyemak imbas yang membenarkan komunikasi antara halaman dalam struktur iFrame bersarang. Pada dasarnya:

  • Halaman induk (www.foo.com/home.html) halaman anak iframes (www.bar.com/framed.html).
  • Halaman anak (www .bar.com/framed.html) halaman pembantu iframes (www.foo.com/helper.html).

Ini struktur membenarkan komunikasi antara:

  • www.bar.com/framed.html dan www.foo.com/helper.html (dalam iFrame yang sama)
  • www.foo. com/home.html dan www.foo.com/helper.html (pada perkara yang sama domain)

Pelaksanaan

Dalam www.foo.com/home.html:

<script>
  function resizeIframe(height) {
    document.getElementById("frame_name_here").height = parseInt(height) + 60;
  }
</script>
<iframe>
Salin selepas log masuk

Dalam www. bar.com/framed.html:

<body onload="iframeResizePipe()">
<iframe>
Salin selepas log masuk

Dalam www.foo.com/helper.html:

<body onload="parentIframeResize()">
<script>
  function parentIframeResize() {
    var height = getParam("height");
    parent.parent.resizeIframe(height);
  }

  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&]*)");
    var results = regex.exec(window.location.href);
    if (results == null) return "";
    else return results[1];
  }
</script>
Salin selepas log masuk

Penyelesaian ini melibatkan komunikasi melalui iframe "helper" (www.foo.com/helper.html) yang berada pada domain yang sama dengan halaman induk dan memudahkan permintaan saiz semula antara iFrames anak dan ibu bapa.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz iFrame Secara Dinamik Berdasarkan Kandungan Merentas Domainnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan