Bagaimanakah Saya Boleh Melaraskan Tinggi IFRAME Secara Dinamik Berdasarkan Kandungannya?

Pelarasan Ketinggian IFRAME Dinamik Berdasarkan Kandungan Dalaman

Dalam senario tertentu, IFRAME digunakan untuk memaparkan kandungan daripada sumber luaran. Walau bagaimanapun, cabaran timbul apabila ketinggian kandungan melebihi IFRAME, yang berpotensi mengakibatkan bar skrol yang tidak diingini. Untuk menangani isu ini, pembangun sering mencari penyelesaian yang melaraskan ketinggian IFRAME secara automatik untuk menampung saiz kandungan dinamik.

Satu pendekatan biasa untuk masalah ini melibatkan mendapatkan semula ketinggian kandungan IFRAME menggunakan contentWindow. document.body.scrollHeight harta. Sifat ini mengembalikan ketinggian tatal menegak dokumen yang terkandung dalam IFRAME.

Untuk melaraskan ketinggian IFRAME dengan sewajarnya, adalah mungkin untuk memanfaatkan atribut tinggi. Dengan menetapkan nilai atribut kepada ketinggian skrol yang diambil, IFRAME akan berkembang atau mengecut untuk sepadan dengan saiz kandungan.

Berikut ialah contoh coretan kod JavaScript yang menggabungkan konsep ini:

function iframeLoaded() {
  var iFrameID = document.getElementById('idIframe');
  if (iFrameID) {
    iFrameID.height = ""; // Reset height to remove potential scroll bars
    iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }
}

Fungsi ini boleh digunakan apabila IFRAME dimuatkan untuk memastikan ketinggiannya dilaraskan dengan sewajarnya. Untuk mencetuskan fungsi ini terus daripada kandungan IFRAME, skrip berikut boleh ditambah pada skrip kandungan IFRAME:

parent.iframeLoaded();

Dengan menggabungkan teknik ini, adalah mungkin untuk mencipta IFRAME dengan ketinggian dinamik yang sesuai dengan saiz yang lancar. dan variasi kandungan dalaman mereka, menghapuskan bar skrol yang tidak perlu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaraskan Tinggi IFRAME Secara Dinamik Berdasarkan Kandungannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!