Bagaimanakah Saya Boleh Melaraskan Ketinggian Iframe Secara Dinamik Semasa Memintas Dasar Asal Sama?

Pelarasan Ketinggian Iframe Dinamik

Apabila menyepadukan kandungan daripada sumber luaran melalui iframe, memastikan pelarasan ketinggian yang betul menjadi penting. Artikel ini membincangkan penyelesaian yang memintas dasar asal yang sama, membenarkan iframe mengubah saiz secara automatik untuk menampung kandungannya.

Mengeksploitasi Keanehan Penyemak Imbas untuk Melangkau Dasar Asal Yang Sama

Kuncinya terletak pada memanfaatkan ciri pelayar yang membenarkan domain induk berkomunikasi dengan iframe, sementara iframe tidak boleh berkomunikasi secara langsung dengan induknya. Hierarki komunikasi ini digambarkan di bawah:

Melalui Maklumat Ketinggian Menggunakan Argumen URL

Untuk menentukan ketinggian iframe, halaman kandungan (www.bar.net/ framed.html) mengiranya dan menetapkan atribut src iframe pembantu (terletak pada domain yang sama dengan induk) melalui URL hujah. Helper iframe kemudiannya memajukan maklumat ini kepada induk, yang boleh melaraskan ketinggian iframe sewajarnya.

Pelaksanaan Kod

www.foo.com/home. html (Ibu bapa Halaman):

function resizeIframe(height) {
  // Adjust the iframe height with a slight margin
  document.getElementById('frame_name_here').height = parseInt(height) + 60;
}

www.bar.net/framed.html (Halaman Kanak-kanak):

function iframeResizePipe() {
  // Calculate and pass the height to the helper iframe
  var height = document.body.scrollHeight;
  var pipe = document.getElementById('helpframe');
  pipe.src = 'http://www.foo.com/helper.html?height=' + height + '&cacheb=' + Math.random();
}

www.foo .com/helper.html (Halaman Pembantu):

function parentIframeResize() {
  // Extract the height from the URL argument
  var height = getParam('height');

  // Communicate the height to the parent page
  parent.parent.resizeIframe(height);
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaraskan Ketinggian Iframe Secara Dinamik Semasa Memintas Dasar Asal Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!