Bagaimana untuk Mengubah Saiz Iframe Secara Dinamik untuk Penyepaduan Lancar?-tutorial php-php.cn

Bagaimana untuk Mengubah Saiz Iframe Secara Dinamik untuk Penyepaduan Lancar?

Patricia Arquette

Lepaskan： 2024-10-26 17:06:03

asal

861 orang telah melayarinya

How to Dynamically Resize Iframes for Seamless Integration?

Saiz Semula Ketinggian iframe dinamik untuk Penyepaduan Lancar

Apabila menyepadukan halaman web ke dalam tapak web anda sendiri menggunakan iframe, selalunya anda perlu melaraskan ketinggian iframe secara dinamik berdasarkan kandungan di dalamnya, menghapuskan bar skrol yang tidak diperlukan untuk penampilan yang lebih bersih.

Menangani Isu

Pendekatan JavaScript konvensional untuk mengira ketinggian kandungan pencetus ralat "akses ditolak kebenaran". Pilihan alternatif seperti Ajax dan PHP juga gagal dalam menyelesaikan cabaran ini.

Penyelesaian yang Dicetuskan iframe

Penyelesaian yang lebih mantap terletak pada memanfaatkan pencetus daripada iframe elemen badan dalam peristiwa tetingkap.onload. Berikut ialah pelaksanaannya:

Dalam HTML iframe:

<code class="html"><body onload='parent.resizeIframe(document.body.scrollHeight)'></body></code>

Salin selepas log masuk

Dalam bingkai induk:

<code class="javascript">function resizeIframe(newHeight) {
    document.getElementById('blogIframe').style.height = parseInt(newHeight, 10) + 10 + 'px';
}</code>

Salin selepas log masuk

Pendekatan ini mencetuskan saiz semula sebaik sahaja kandungan iframe dimuatkan sepenuhnya , tanpa bergantung pada kaedah yang terdedah kepada ralat. Untuk meningkatkan pengalaman pengguna, anda boleh menyembunyikan iframe pada mulanya dan memaparkan imej "memuatkan". Setelah menerima panggilan resizeIframe, sembunyikan imej yang dimuatkan dan paparkan iframe, mencipta kesan "seperti Ajax".

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Iframe Secara Dinamik untuk Penyepaduan Lancar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!