Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Melaraskan Ketinggian iFrame secara Automatik kepada Saiz Kandungan Tanpa Bar Skrol?

Bagaimana untuk Melaraskan Ketinggian iFrame secara Automatik kepada Saiz Kandungan Tanpa Bar Skrol?

Patricia Arquette
Lepaskan: 2024-11-17 07:19:03
asal
316 orang telah melayarinya

How to Automatically Adjust iFrame Height to Content Size Without a Scrollbar?

Cara Melaraskan Ketinggian iFrame secara Automatik kepada Saiz Kandungan tanpa Bar Skrol

Apabila memasukkan iframe ke dalam tapak web anda, anda mungkin menghadapi keperluan untuknya ketinggian untuk menyesuaikan diri secara dinamik dengan kandungan yang dipaparkan. Dengan menghapuskan bar skrol, anda boleh mencipta pengalaman pengguna yang lancar dan menyenangkan dari segi estetika. Artikel ini menangani isu ini dengan menyediakan penyelesaian yang melaraskan ketinggian iframe secara automatik, berdasarkan saiz kandungannya.

Untuk mencapai pelarasan ini, ikut langkah berikut:

  1. Pengubahsuaian Bahagian Kepala:

    • Tambahkan kod JavaScript berikut dalam bahagian dokumen anda.
    • 1

      2

      3

      4

      <script>

        function resizeIframe(obj) {

          obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';

        }

      Salin selepas log masuk
  2. Pengubahsuaian iFrame:

    • Ubah suai iframe anda untuk memasukkan atribut berikut:

Fungsi JavaScript, resizeIframe, memainkan peranan penting dalam penyelesaian ini. Ia mengira ketinggian dokumen dalam iframe dan menetapkan nilai itu sebagai ketinggian iframe baharu, dengan berkesan melaraskannya agar sepadan dengan saiz kandungan. Dengan menghapuskan bar skrol, iframe menyesuaikan dengan lancar kepada kandungannya tanpa menjejaskan pengalaman visual pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Melaraskan Ketinggian iFrame secara Automatik kepada Saiz Kandungan Tanpa Bar Skrol?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan