Bagaimanakah Saya Boleh Mengubah Saiz Iframe daripada Domain Berbeza Menggunakan postMessage?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mengubah Saiz Iframe daripada Domain Berbeza Menggunakan postMessage?

Mary-Kate Olsen

Lepaskan： 2024-12-05 18:39:10

asal

225 orang telah melayarinya

How Can I Resize an Iframe from a Different Domain Using postMessage?

Mengubah saiz Iframe daripada Domain Berbeza menggunakan postMessage

Percubaan untuk mengubah saiz iframe daripada domain berbeza boleh menjadi tugas yang mencabar. Semasa menggunakan easyXDM berfungsi sebagai sandaran yang berkesan untuk halaman yang tidak mematuhi HTML5, terdapat penyelesaian alternatif yang patut dipertimbangkan.

Salah satu penyelesaian sedemikian ialah menggunakan postMessage. Kaedah ini melibatkan pemindahan ketinggian halaman anak ke halaman induk, yang kemudian melaraskan ketinggian iframe sewajarnya.

Butiran Pelaksanaan

Halaman Kanak-kanak

Kira ketinggian halaman kanak-kanak menggunakan document.getElementById('element_id).scrollHeight.
Siarkan ketinggian ke halaman induk menggunakan parent.postMessage(actual_height,"*");. Asterisk membenarkan siaran ke mana-mana iframe induk tanpa mengira domain.

<script>
function adjust_iframe_height(){
    var actual_height = document.getElementById('element_id').scrollHeight;
    parent.postMessage(actual_height,"*"); 
    //* allows this to post to any parent iframe regardless of domain
}
</script>

<body onload="adjust_iframe_height();"> 
//call the function above after the content of the child loads
</body>

Salin selepas log masuk

Halaman Induk

Tambahkan pendengar acara pada tetingkap induk ke terima mesej daripada halaman kanak-kanak. Gantikan iframe_id dengan ID iframe anda.
Kemas kini ketinggian iframe berdasarkan ketinggian yang diterima.

<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
  document.getElementById('iframe_id').height = e.data + 'px';
},false);
</script>

Salin selepas log masuk

Faedah Menggunakan postMessage

Komunikasi Rentas Domain: postMessage membenarkan komunikasi antara domain yang berbeza, menjadikannya sesuai untuk mengubah saiz iframe daripada asal yang berbeza.
Pengiraan Ketinggian: Halaman anak mengira ketinggiannya dengan tepat dan menyampaikannya ke halaman induk, memastikan saiz semula iframe yang betul.
Kesederhanaan: Pelaksanaannya adalah mudah dan memerlukan pengubahsuaian kod yang minimum.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Iframe daripada Domain Berbeza Menggunakan postMessage?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!