Bagaimanakah Saya Boleh Melaraskan Ketinggian Iframe Secara Dinamik untuk Mencegah Bar Skrol Menggunakan jQuery atau JavaScript?

Pelarasan Ketinggian Iframe Dinamik Menggunakan jQuery

Untuk memastikan iframe menyesuaikan dengan lancar pada ketinggian kandungannya dan menghapuskan bar skrol, pembangun sering menghadapi cabaran semasa melaksanakan fungsi ini. Mari kita terokai penyelesaian menggunakan jQuery atau JavaScript.

Pendekatannya melibatkan mendapatkan semula ketinggian kandungan iframe dan melaraskan ketinggian iframe dengan sewajarnya. Berikut ialah coretan jQuery yang menunjukkan cara untuk mencapai perkara ini:

$("#TB_window", window.parent.document).height($("body").height() + 50);

Walaupun pendekatan ini mungkin berkesan dalam sesetengah penyemak imbas seperti Chrome, ia boleh membawa kepada gelagat yang tidak dijangka pada yang lain, seperti Firefox di mana elemen TB_window runtuh.

Untuk mengatasi isu ini, kami boleh mendapatkan terus ketinggian kandungan iframe menggunakan JavaScript:

contentWindow.document.body.scrollHeight

Setelah anda mempunyai ketinggian kandungan, anda boleh mengubah suai ketinggian iframe secara dinamik:

  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }

Untuk menyambung pengendali ini, masukkan atribut berikut dalam teg IFRAME:

<iframe>

Ingat, dalam kes di mana kandungan dikemas kini dalam iframe, adalah disyorkan untuk mencetuskan iframeLoaded berfungsi semula dari dalam iframe itu sendiri melalui skrip berikut:

parent.iframeLoaded();

Dengan melaksanakan penyelesaian ini, anda boleh memastikan iframe anda melaraskan ketinggiannya secara dinamik untuk menampung kandungan yang terkandung di dalamnya, memberikan pengalaman pengguna yang lancar tanpa bar skrol yang mengganggu. .

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaraskan Ketinggian Iframe Secara Dinamik untuk Mencegah Bar Skrol Menggunakan jQuery atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!