Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mengubah Saiz Iframe daripada Domain Berbeza Menggunakan postMessage?
Bagaimanakah Saya Boleh Mengubah Saiz Iframe daripada Domain Berbeza Menggunakan postMessage?
- Mary-Kate Olsenasal
- 2024-12-05 18:39:10223semak imbas
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>
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>
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!