Bagaimanakah Saya Boleh Auto Ubah Saiz iFrames agar Sesuai dengan Kandungannya?

Auto-Mengubah Saiz iFrames untuk Memadankan Kandungan

Meningkatkan fleksibiliti halaman web, melaraskan dimensi iframe untuk menampung kandungannya menyediakan kelancaran pengalaman pengguna. Mari kita terokai penyelesaian kepada cabaran ini.

Kuncinya terletak pada menangkap perubahan dalam dimensi dokumen terbenam. Dengan sifat JavaScript yang didorong oleh peristiwa, kami boleh menggunakan pendengar acara pada dokumen dan bertindak balas secara dinamik kepada perubahan ini. Khususnya, kami berminat dengan acara DOMContentLoaded, yang mencetuskan apabila kandungan dokumen telah dimuatkan sepenuhnya.

Sekarang, mari kita selami kod JavaScript:

function resizeIFrameToFitContent(iFrame) {
    iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

Fungsi ini mengambil iframe sebagai hujahnya dan mengemas kini lebar dan tingginya agar sepadan dengan lebar dan ketinggian tatal dokumen terbenam body.

Untuk memulakan proses ini, kami menambah pendengar acara pada acara DOMContentLoaded:

window.addEventListener('DOMContentLoaded', function(e) {
    var iFrame = document.getElementById('iFrame1');
    resizeIFrameToFitContent(iFrame);
});

Anda boleh menyesuaikan pengecam 'iFrame1' untuk menyasarkan iframe khusus yang ingin anda laraskan. Sebagai alternatif, untuk mengubah saiz semua iframe pada halaman, ulangi melaluinya menggunakan gelung:

var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
    resizeIFrameToFitContent( iframes[i] );
}

Kod yang dipertingkat ini membenarkan pensaiz semula automatik bagi kedua-dua individu dan semua iframe pada halaman, memastikan dimensinya sentiasa sejajar dengan kandungan mereka.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Auto Ubah Saiz iFrames agar Sesuai dengan Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!