Tutorial Keterampilan Produksi Halaman Web: Tinggi Adaptif IfRame

Penulis：Eve Cole Waktu Pembaruan：2025-04-21 07:48:02

Artikel Pengenalan Wulin.com (www.vevb.com): Seseorang mungkin belum mengalami masalah ini. Pertama -tama mari kita jelaskan apa itu tinggi adaptif. Yang disebut ketinggian adaptif iframe berarti bahwa berdasarkan keindahan antarmuka dan interaksi, perbatasan dan scrollbar iframe disembunyikan, sehingga tidak mungkin untuk melihat bahwa itu adalah iframe. Jika iframe selalu memanggil halaman ketinggian tetap yang sama, kita hanya perlu menulis ketinggian iframe sampai mati. Dan

Cari ketinggian adaptif iframe melalui Google, dengan lebih dari 5W hasil, cari ketinggian adaptif tinggi iframe, dengan lebih dari 2W hasil.

Saya membaca lusinan artikel di artikel sebelumnya dan menggali sejumlah besar cetak ulang. Ada tiga atau lima artikel yang asli. Dalam artikel asli ini, mereka pada dasarnya hanya berbicara tentang bagaimana beradaptasi dengan hal -hal statis, tetapi mereka tidak mempertimbangkan bagaimana melakukan sinkronisasi dinamis setelah JS mengoperasikan DOM. Selain itu, dalam hal kompatibilitas, penelitian ini juga tidak lengkap.

Saya berharap untuk melakukan beberapa penelitian mendalam dalam dua aspek ini.

Mungkin seseorang belum melakukan kontak dengan masalah ini. Mari kita jelaskan apa yang tinggi adaptif. Yang disebut ketinggian adaptif iframe berarti bahwa berdasarkan keindahan antarmuka dan interaksi, perbatasan dan scrollbar iframe disembunyikan, sehingga tidak mungkin untuk melihat bahwa itu adalah iframe. Jika iframe selalu memanggil halaman ketinggian tetap yang sama, kita hanya perlu menulis ketinggian iframe sampai mati. Jika iframe ingin mengganti halaman, atau halaman yang disertakan perlu melakukan operasi dinamis DOM, program perlu menyinkronkan ketinggian iframe dan ketinggian sebenarnya dari halaman yang disertakan.

Ngomong-ngomong, jika Anda harus menggunakan iframe, itu akan menyebabkan terlalu banyak masalah untuk pengembangan front-end.

Ada kira -kira dua praktik tradisional:

Metode 1: Setelah setiap halaman yang disertakan telah dimuat dengan memuat kontennya sendiri, menjalankan JS untuk mendapatkan ketinggian halaman ini, dan kemudian menyinkronkan ketinggian iframe dari halaman induk.

Metode 2: Jalankan JS di acara Onload dari halaman utama IFRAME, dapatkan konten tinggi dari halaman yang disertakan, dan kemudian menyinkronkan ketinggian.

Dari perspektif pemeliharaan kode, metode dua lebih baik daripada metode satu, karena metode satu, setiap halaman yang disertakan harus memperkenalkan sepotong kode yang sama untuk melakukan ini, dan banyak salinan telah dibuat.

Kedua metode hanya menangani hal -hal yang tenang, yaitu, mereka hanya dieksekusi ketika konten dimuat. Jika JS mengoperasikan perubahan ketinggian yang disebabkan oleh DOM, itu tidak terlalu nyaman.

Jika Anda melakukan interval di jendela utama, terus -menerus mendapatkan ketinggian halaman yang disertakan, dan kemudian melakukan sinkronisasi, apakah itu nyaman dan menyelesaikan masalah JS yang mengoperasikan DOM? Jawabannya adalah ya.

Halaman Demo: Halaman Utama iframe_a.html, berisi halaman iframe_b.htm dan iframe_c.html

Contoh kode halaman utama:

fungsi reinitiFrame () {

var iframe = document.getElementById (frame_content);

mencoba{

iframe.height = iframe.contentwindow.document.documentelement.scrollheight;

} catch (ex) {}

}

window.setInterval (reinitiFrame (), 200);

</script> Apakah akan ada masalah dengan efisiensi?

Saya melakukan tes dan membuka 5 jendela (IE6, IE7, FF, Opera, Safari) untuk menjalankan kode ini, yang tidak akan berdampak pada CPU, dan bahkan akan disesuaikan dengan 2ms, tanpa dampak apa pun (pada dasarnya dikelola pada 0% hunian).

Mari kita bicara tentang masalah kompatibilitas setiap browser. Cara mencapai ketinggian yang benar. Ini terutama layak membandingkan kedua badan. CRollHeight dan DocumentElement.scrollHeight. Perhatikan bahwa artikel ini menggunakan Doctype ini. Dokter yang berbeda tidak boleh mempengaruhi hasilnya, tetapi jika halaman Anda tidak mendeklarasikan Doctype, maka tambahkan satu terlebih dahulu.

<! Doctype html public -// w3c // dtd html 4.01 // en> Tambahkan kode tes berikut ke halaman utama untuk menghasilkan kedua nilai ini, contoh kode:

<div> <button> Periksa Tinggi </buttton> </div> <script type = text/javascript>

function checkHeight () {

var iframe = document.getElementById (frame_content);

var bheight = iframe.contentwindow.document.body.scrollheight;

var dheight = iframe.contentwindow.document.documentelement.scrollheight;

peringatan (bheight: + bheight +, dheight: + dheight);

}

</script> dimuat, dan lapisan yang benar -benar diposisikan dapat dialihkan untuk mengubah ketinggian halaman secara dinamis. Jika lapisan diperluas, ketinggian halaman akan didukung. Contoh kode:

<div> <button> Toggle overlay </button>

</div>

</div>

fungsi toggleoverlay () {

var overlay = document.geteLementById ('overlay');

overlay.style.display = (overlay.style.display == 'none')? 'blok': 'tidak ada';

}

</script> Berikut ini mencantumkan nilai uji kode di atas di setiap browser:

(bheight = body.scrollheight, dheight = documentelement.scrollheight, red = nilai kesalahan, hijau = nilai yang benar)

/ Layer disembunyikan saat lapisan diperluas

bheight dheight bheight dheight

IE6 184 184 184 303

IE7 184 184 184 303

Ff 184 184 184 303

Opera 181 181 300 300

Safari 184 184 303 184

Mari kita abaikan masalah bahwa opera adalah 3 piksel kurang dari yang lain ... dapat dilihat bahwa jika tidak ada posisi absolut, kedua nilai tersebut sama, dan tidak masalah mana yang Anda ambil.

Tetapi jika ada, maka kinerja setiap browser berbeda, dan salah mengambil nilai apa pun. Tetapi satu aturan dapat ditemukan, yaitu, ambil dua nilai maksimum dan kompatibel dengan masing -masing browser. Jadi kode halaman utama kami perlu diubah menjadi ini:

function reinitiFrame () {var iframe = document.getElementById (frame_content);

mencoba{

var bheight = iframe.contentwindow.document.body.scrollheight;

var dheight = iframe.contentwindow.document.documentelement.scrollheight;

var height = math.max (bheight, dheight);

iframe.height = tinggi;

} catch (ex) {}

}

window.setInterval (reinitiFrame (), 200); Dengan cara ini, masalah kompatibilitas pada dasarnya diselesaikan. Ngomong -ngomong, lapisan yang diposisikan tidak hanya mempengaruhi nilai, float juga akan menyebabkan perbedaan antara kedua nilai.

Jika Anda mendemonstrasikan demo, Anda akan menemukan bahwa di browser lain, kecuali untuk IE, ketika lapisan diperluas dan kemudian disembunyikan, nilai tinggi yang diperoleh masih dipertahankan pada ketinggian yang diperluas dari 303, daripada nilai sebenarnya yang tersembunyi 184, yang berarti tidak dapat menyusut kembali setelah tumbuh lebih tinggi. Fenomena ini juga dapat terjadi ketika beralih di antara halaman yang disertakan yang berbeda. Saat beralih dari halaman tinggi ke halaman rendah, ketinggian yang diperoleh masih memiliki nilai tinggi yang sama.

Ini dapat dirangkum sebagai: Ketika ketinggian bentuk iframe lebih tinggi dari ketinggian dokumen yang sebenarnya, ketinggian diambil sebagai ketinggian bentuk, dan ketika ketinggian bentuk lebih rendah dari ketinggian dokumen yang sebenarnya, ketinggian sebenarnya dari dokumen diambil sebagai ketinggian dokumen yang sebenarnya. Oleh karena itu, perlu menemukan cara untuk mengatur tinggi ke nilai yang lebih rendah daripada dokumen aktual sebelum menyinkronkannya. Oleh karena itu, tambahkan onload = this.height = 100 ″ ke iframe, sehingga halaman cukup pendek saat memuat, dan kemudian menyinkronkan ke ketinggian yang sama.

Nilai ini ditentukan dalam aplikasi aktual dan cukup pendek tetapi tidak terlalu pendek, jika tidak, akan ada kedipan di browser seperti FF. Ketika DOM dioperasikan, halaman utama tidak dapat dipantau, sehingga tinggi dapat dikurangi setelah DOM dioperasikan.

Dalam salah satu proyek saya yang sebenarnya, saya tidak melakukan hal ini dalam hal menimbang biaya dan manfaat, karena saya harus memasukkan kode ini ke dalam setiap fungsi DOM, yang terlalu mahal, dan pada kenyataannya, tidak fatal untuk mengecilkan lapisan atau tidak menyusut. Termasuk dalam demo, hal ini tidak dilakukan. Jika pembaca memiliki cara yang lebih baik, beri tahu saya.

Berikut ini kode untuk halaman utama terakhir:

fungsi reinitiFrame () {

var iframe = document.getElementById (frame_content);

mencoba{

var bheight = iframe.contentwindow.document.body.scrollheight;

var dheight = iframe.contentwindow.document.documentelement.scrollheight;

var height = math.max (bheight, dheight);

iframe.height = tinggi;

} catch (ex) {}

}

window.setInterval (reinitiFrame (), 200);

</script>