Bagaimana untuk Mengubah Saiz Iframe Secara Dinamik agar Sesuai dengan Kandungannya?

Cara Melaraskan Tinggi Iframe Berdasarkan Kandungan Secara Dinamik

Dalam senario di mana kandungan iframe melebihi had ketinggiannya, adalah penting untuk melaraskan secara dinamik saiznya untuk menampung lebihan kandungan. Ini boleh dicapai menggunakan gabungan JavaScript dan JQuery.

Untuk mendapatkan semula ketinggian kandungan iframe, gunakan kod berikut:

contentWindow.document.body.scrollHeight

Setelah iframe dimuatkan, ubah saiznya secara dinamik menggunakan:

function iframeLoaded() {
  var iFrameID = document.getElementById('idIframe');
  if (iFrameID) {
    // Delete and recreate the height to ensure proper resizing
    iFrameID.height = "";
    iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }
}

Sertakan pengendali acara "onload" dalam iframe tag:

<iframe>

Untuk mengendalikan saiz semula dinamik selepas penyerahan borang dalam iframe, masukkan kod berikut dalam skrip kandungan iframe:

parent.iframeLoaded();

Pendekatan ini memastikan ketinggian iframe dilaraskan secara dinamik untuk menampung semua kandungan, menghapuskan keperluan untuk bar skrol dan mengekalkan pengalaman pengguna yang lancar merentasi pelbagai pelayar.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Iframe Secara Dinamik agar Sesuai dengan Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!