Artikel ini menjelaskan metode JS untuk mengimplementasikan ketinggian adaptif iframe. Bagikan untuk referensi Anda, sebagai berikut:
Saya telah bermasalah dengan tingkat adaptasi yang tinggi sebelumnya dari iframes sebelumnya, dan banyak kode JS tampaknya bodoh di FF. Kemudian, kode berikut akhirnya diambil oleh saya dari ribuan tumpukan kode yang mengklaim kompatibel dengan FF. Saya sudah menggunakannya, sangat mudah digunakan. Khusus untuk orang -orang seperti saya yang memiliki tingkat JS yang rendah (saya sangat malu) kode ini sederhana dan mudah dimengerti dan nyaman untuk dimodifikasi. Cukup salin dan tempel kode berikut ke dalam tag <body> halaman di mana iframe berada dan memodifikasi nama ID (perhatikan bahwa ada dua tempat yang harus dimodifikasi, dan lokasi dijelaskan dalam kode).
Salut kepada teman -teman yang membuat kode ini.
Langkah 1: Masukkan kode JS berikut di bawah tag <body>
<scriptLanguage = "javaScript"> function adjestramesize () {var frm = document.getElementById ("iframe1"); // ganti iframe1 dengan nama id Anda var subweb = document.frames? document.frames ["iframe1"]. Dokumen: frm.contentDocument; if (frm! = null && subweb! = null) {frm.style.height = "0px"; // inisialisasi, jika tidak, ketinggian halaman besar akan dipertahankan frm.style.height = subweb.documentelement.scrollheight+"px"; frm.style.width = subweb.documentelement.scrollwidth+"px"; subweb.body.style.overflowx = "auto"; subweb.body.style.overflowy = "auto"; }} </script>Langkah 2: Tambahkan ID = "IFRAME1" ONLOAD = "AdjustFramesize ()" ke tag iframe
Sebagai contoh: Kode Kode Salin adalah sebagai berikut: <iframe id = "iframe1" onload = "adjectFrameSize ()" scrolling = "no" src = "iframe1.html" width = "100%" target = "_ self" frameborder = "0"> </iframe>
Kode ini memiliki kelemahan kecil, yaitu jarak antara konten di iframe dan perbatasan luar (jika batas luar ada) sedikit kecil, sehingga Anda dapat menyesuaikannya dengan tepat sendiri; Selain itu, tidak ada browser lain yang diuji kecuali IE6.0 atau di atas dan FF, dan tidak ada cacat lain yang ditemukan. Jika Anda menemukan masalah selama penggunaan atau memiliki solusi yang lebih baik, silakan bagikan.
Jika halaman IFRAME berisi halaman yang dimuat AJAX atau secara dinamis menambahkan konten melalui JS, Anda dapat menambahkan metode berikut:
1: Tambahkan konten berikut ke subhalaman
// Ubah Fungsi Alamat Jendela Parent ChangeHeight () {window.top.location.hash = "#height =" + $ (dokumen) .height ();}Ubah bagian DOM untuk memanggil metode ini
2: Tambahkan halaman induk
// tinggi adaptif var iframe = document.geteLementById ("iframe1"); function iframeHeight () {var hash = window.location.hash.slice (1), h; if (hash && /height=/.test(hash)) {h = hash.replace ("height =", ""); iframe.style.height = h+"px"; window.location.hash = "#temp"; // mencegah ketinggian dari tidak berubah saat mengklik halaman lain} setTimeout (iframeHeight, 100);} iframeHeight ();Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Teknik Operasi JSON di JavaScript", "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Teknik Pencarian Javascript," Ringkasan Javascript, "Ringkasan Javascript," Ringkasan "Ringkasan" Ringkasan "Ringkasan Javascript" Ringkasan "Ringkasan" Ringkasan Javascript Struktur Data dan Teknik Algoritma "," Ringkasan Algoritma dan Teknik Traversal JavaScript "dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.