Bagaimanakah Saya Boleh Mengubah Saiz Ketinggian iFrame Secara Dinamik agar Sesuai dengan Kandungannya Merentas Pelayar?

Mengubah Saiz Ketinggian iFrame Secara Dinamik kepada Padanan Kandungan

Apabila membenamkan halaman aspx dalam iFrame, ketinggian iFrame mungkin tidak dapat menampung kandungannya dengan secukupnya, mengakibatkan bar skrol yang tidak diingini. Untuk menangani isu ini, mari kita terokai penyelesaian merentas penyemak imbas.

Memahami Cabaran Merentas Penyemak Imbas

Pendekatan jQuery yang disediakan berjaya melaraskan ketinggian iFrame dalam Chrome tetapi menghadapi masalah dalam Firefox. Percanggahan ini timbul daripada variasi dalam cara penyemak imbas berbeza mengendalikan sekatan skrip merentas tapak (XSS).

Penyelesaian Optimum

Untuk menentukan ketinggian kandungan iFrame, kami memanfaatkan contentWindow.document. badan.scrollHeight. Setelah iFrame dimuatkan, kami mengubah saiznya secara dinamik menggunakan JavaScript berikut:

function iframeLoaded() {
    var iFrameID = document.getElementById('idIframe');
    if(iFrameID) {
          iFrameID.height = "";
          iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
    }   
}

Pelaksanaan

Sertakan JavaScript ini dalam halaman tempat anda membenamkan iFrame dan sambungkan pengendali acara ke atribut onLoad bagi teg iFrame:

<iframe>

Penggunaan Lanjutan Kes

Dalam senario di mana kemas kini kandungan dalam iFrame memerlukan pencetus manual penubah, anda boleh menggunakan iframeLoaded() daripada skrip kandungan iFrame:

parent.iframeLoaded();

Penyelesaian komprehensif ini menyediakan penyemak imbas silang keserasian untuk mengubah saiz secara dinamik ketinggian iFrame berdasarkan kandungannya, menghapuskan skrol yang tidak diingini bar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Ketinggian iFrame Secara Dinamik agar Sesuai dengan Kandungannya Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!