Mengapa tiga pembicaraan
Mengapa tiga pembicaraan? Salah satunya karena topik ini benar-benar dibicarakan dengan buruk, dan yang lainnya adalah karena Master Tai menulis artikel ini n tahun yang lalu untuk membahas tentang iframe adaptive height . Alasan mengapa saya mengajukan pertanyaan ini lagi adalah karena saya memang pernah menemui semua aspek masalah ini pada proyek-proyek sebelumnya, dan perlu diringkas. Saya harap ini membantu Anda, mohon koreksi saya jika ada kesalahan.
Ketinggian domain dan subhalaman yang sama tidak akan bertambah secara dinamis
Situasi ini adalah yang paling sederhana. Dapatkan tinggi sebenarnya dari subhalaman secara langsung melalui skrip dan ubah tinggi elemen iframe. Namun ada dua hal yang perlu diperhatikan:
Jika ada elemen yang benar-benar diposisikan di halaman atau tidak ada elemen mengambang, situasinya agak rumit. Browser yang berbeda memiliki hasil pemrosesan yang berbeda, bahkan browser dengan kernel Webkit. Silakan lihat Demo ini untuk detailnya. Jadi Anda melakukan deteksi browser, menggunakan Math.max untuk menghitung nilai maksimum, atau memikirkan hal lain.
Halaman yang terdapat pada iframe mungkin berukuran sangat besar dan membutuhkan waktu loading yang lama. Saat menghitung tinggi secara langsung, kemungkinan besar halaman tersebut belum terdownload, dan akan terjadi masalah pada penghitungan tinggi. Jadi lebih baik menghitung ketinggian di acara onload iframe. Perlu juga dicatat di sini bahwa model acara Microsoft obj.attachEvent harus digunakan untuk mengikat acara onload di bawah IE. Browser lain juga bisa langsung menggunakan obj.onload = function(){}.
(fungsi(){
var _reSetIframe = fungsi(){
var frame = dokumen.getElementById("frame_content_parent")
mencoba {
var frameContent = frame.contentWindow.dokumen,
tinggi badan = Math.max
(frameContent.body.scrollHeight,
frameContent.documentElement.scrollHeight);
if (tinggi badan != bingkai.tinggi){
frame.height = tinggi badan;
}
}
menangkap(misal) {
bingkai.tinggi = 1800;
}
}
if(frame.addEventListener){
frame.addEventListener
("memuat",fungsi(){setInterval(_reSetIframe,200);},false);
}kalau tidak{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
Di domain yang sama, tinggi subhalaman akan meningkat secara dinamis, dan skrip mungkin gagal total.
Pada contoh kedua, kesalahan skrip diperhitungkan, tetapi jika skrip tidak dijalankan sama sekali, konten di iframe tidak akan ditampilkan karena ketinggian iframe tidak cukup tinggi. Oleh karena itu, biasanya kita mengatur ketinggian yang cukup terlebih dahulu. Untuk kenyamanan kontrol front-end, menurut saya lebih tepat untuk menuliskannya dalam file CSS. Jika diperlukan modifikasi, cukup ubah CSSnya. Di sini saya mengatur pemilih{ height:1800px }. Perlu dicatat bahwa gaya yang ditulis dalam style sheet tidak dapat diambil secara langsung menggunakan node.style[property]. Untuk model Microsoft, node.currentStyle[property] harus digunakan (penyimpangan: model IE yang tragis tidak mendukung CSS pseudo- class ), untuk model W3C, gunakan window.getComputedStyle(node,null)[property] untuk mendapatkannya. Saya menggunakan YUI secara langsung demi kenyamanan.
Ada masalah lain di sini. Saat menyetel tinggi iframe lebih besar dari tinggi halaman di dalamnya, setiap browser menanganinya secara berbeda. Misalnya, di Firefox, tinggi elemen body harus dihitung, dan tinggi elemen html sama dengan tinggi iframe. Namun, jika halaman memiliki posisi absolut dan elemen mengambang yang tidak jelas, hal tersebut tidak dapat dilakukan diperoleh melalui elemen body. Jelas, metode pertama Kerugian dari metode ini lebih kecil. Silakan lihat Demo ini untuk detailnya.