Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Membuat Saiz Iframe Secara Automatik agar Sesuai dengan Kandungannya?

Bagaimanakah Saya Boleh Membuat Saiz Iframe Secara Automatik agar Sesuai dengan Kandungannya?

Patricia Arquette
Lepaskan: 2024-12-13 00:09:16
asal
1037 orang telah melayarinya

How Can I Make an Iframe Automatically Resize to Fit its Content?

AutoMelaraskan Dimensi Iframe agar Sesuai dengan Kandungan

Masalah:

Bagaimanakah lebar dan ketinggian iframe boleh dilaraskan secara automatik untuk menepati kandungan yang terkandung dengan tepat? Pelarasan ini sepatutnya boleh dilakukan selepas iframe dimuatkan.

Penyelesaian:

Untuk mencapai ini, tindakan acara diperlukan untuk mengendalikan perubahan dalam dimensi badan dalam iframe itu. Inilah penyelesaiannya:

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

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

  // To resize all iframes:
  var iframes = document.querySelectorAll("iframe");
  for (var i = 0; i < iframes.length; i++) {
    resizeIFrameToFitContent(iframes[i]);
  }
});
Salin selepas log masuk

Dalam kod di atas:

  • Fungsi resizeIFrameToFitContent() menetapkan atribut lebar dan ketinggian iframe berdasarkan lebar dan ketinggian skrolnya isi kandungan.
  • Pendengar acara DOMContentLoaded digunakan untuk melaraskan dimensi iframe selepas iframe dimuatkan.
  • Kod tambahan pilihan (diulas keluar) boleh digunakan untuk mengubah saiz semua iframe pada halaman.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Saiz Iframe Secara Automatik agar Sesuai dengan Kandungannya?. 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