Bagaimana untuk Mengubah Saiz Iframe Secara Dinamik Tanpa Ajax atau PHP?-tutorial php-php.cn

Bagaimana untuk Mengubah Saiz Iframe Secara Dinamik Tanpa Ajax atau PHP?

Linda Hamilton

Lepaskan： 2024-10-27 02:10:02

asal

687 orang telah melayarinya

How to Dynamically Resize Iframes Without Ajax or PHP?

Saiz Iframe Dinamik: Mengatasi Kekangan Ketinggian

Apabila membenamkan kandungan luaran dalam iframe, adalah penting untuk melaraskan ketinggian secara dinamik untuk menghapuskan bar skrol yang tidak diperlukan . Untuk mengelakkan isu kebolehaksesan dan mengekalkan pengalaman satu halaman yang lancar, kami akan meneroka pilihan di luar Ajax atau PHP.

Penyelesaian: Komunikasi Merentas Domain dengan JavaScript

Malangnya , Ajax dan PHP gagal dalam senario ini disebabkan oleh sekatan merentas domain. Sebaliknya, kami akan menggunakan JavaScript untuk memulakan interaksi merentas domain antara kandungan iframe dan halaman induk.

Langkah 1: Pencetus Pengiraan Ketinggian daripada Halaman Berbingkai

Suntikan kod ini ke dalam badan iframe:

<body onload='parent.resizeIframe(document.body.scrollHeight)'>

Salin selepas log masuk

Langkah 2: Ubah Saiz Fungsi dalam Halaman Induk

Dalam JavaScript halaman induk, tentukan fungsi untuk melaraskan ketinggian iframe:

function resizeIframe(newHeight)
{
  document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}

Salin selepas log masuk

Mengendalikan Ketinggian dan Pemuatan Awal

Pada mulanya, iframe akan mempunyai ketinggian lalai.
Tambah imej pemuatan yang kelihatan pada mulanya dan sembunyikannya apabila fungsi resizeIframe dijalankan.
Ini mewujudkan ilusi saiz semula dinamik.

Penghadan dan Pertimbangan

Penyelesaian beroperasi dalam domain yang sama. Untuk pembenaman merentas domain, pertimbangkan untuk menggunakan skrip proksi PHP atau membenamkan suapan RSS blog secara terus.

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