Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Melaraskan Ketinggian Iframe secara Dinamik dengan jQuery/Javascript?

Bagaimana untuk Melaraskan Ketinggian Iframe secara Dinamik dengan jQuery/Javascript?

Susan Sarandon
Susan Sarandonasal
2024-12-07 12:51:15383semak imbas

How to Dynamically Adjust Iframe Height with jQuery/Javascript?

Pelarasan Ketinggian Iframe Dinamik dengan jQuery/Javascript

Untuk memastikan ketinggian iframe melaraskan secara dinamik kepada kandungannya tanpa memaparkan bar skrol, anda boleh menggunakan pendekatan berikut menggunakan jQuery/Javascript:

Pertama sekali, kenal pasti teg div pembalut dalam iframe yang merangkumi semua kandungannya dan tetapkan kepada pembolehubah, seperti "contentWrap."

Seterusnya, dapatkan ketinggian kandungan menggunakan kod berikut:

var contentHeight = $("contentWrap").height();

Akhir sekali, kemas kini ketinggian iframe kepada menampung kandungan:

$("#iframeID").height(contentHeight + 50 + "px"); // Optional additional margin

Teknik ini bergantung pada mengakses kandungan iframe melalui sifat "contentWindow"nya. Jidar " 50px" boleh disesuaikan berdasarkan keperluan anda.

Dalam contoh yang disediakan, div "TB_window" mewakili bekas untuk iframe pada halaman induk. Dengan mengubah suai ketinggian iframe berdasarkan ketinggian tatal elemen badannya, anda boleh memastikan kandungan itu sesuai dalam iframe tanpa melimpah.

Walau bagaimanapun, sila ambil perhatian bahawa anda disyorkan untuk menangani isu merentas domain yang berpotensi dengan menggunakan dasar perkongsian sumber silang (CORS) atau menggunakan "postMessage" dan bukannya manipulasi DOM langsung.

Atas ialah kandungan terperinci Bagaimana untuk Melaraskan Ketinggian Iframe secara Dinamik dengan jQuery/Javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn