Bagaimanakah Saya Boleh Mengubah Saiz Iframe Secara Dinamik Berdasarkan Ketinggian Kandungannya Merentas Domain?

Mengubah saiz Iframe Berdasarkan Ketinggian Kandungan

Apabila bekerja dengan iframe untuk memaparkan kandungan daripada domain lain, melaraskan ketinggiannya agar sesuai dengan kandungan boleh menjadi cabaran kerana dasar asal yang sama. Dasar ini mengehadkan komunikasi JavaScript antara halaman pada domain yang berbeza.

Penyelesaian:

Untuk mengatasi had ini, pendekatan berbilang langkah diperlukan yang melibatkan kedua-dua kandungan iframe dan halaman pembingkaian.

1. Komunikasi Merentas Domain:

Memandangkan kandungan iframe dan halaman pembingkaian berada pada domain yang berbeza, komunikasi langsung tidak dapat dilakukan. Walau bagaimanapun, mekanisme "paip" boleh diwujudkan menggunakan iframe lain.

2. Pengiraan Ketinggian dan Penghantaran Mesej:

Apabila kandungan iframe dimuatkan, ia mengira ketinggiannya dan menetapkan sumber iframe tersembunyi pada halaman pembingkaian kepada halaman pembantu pada domain yang sama, melepasi ketinggian yang dikira sebagai hujah dalam URL.

3. Halaman Pembantu dan Saiz Bingkai Induk:

Halaman pembantu pada domain yang sama menerima ketinggian daripada kandungan iframe dan menyampaikannya kepada bingkai induk, yang kemudiannya boleh mengubah saiz iframe dengan sewajarnya.

Kod:

Pembingkaian Halaman:

<script type="text/javascript">
  function resizeIframe(height) {
    document.getElementById('myIframe').height = height + 60;
  }
</script>
<iframe>

Kandungan Iframe:

<script type="text/javascript">
  function setIframeHeight() {
    var height = document.body.scrollHeight;
    document.getElementById('iframeResizer').src = 'helper.com?height=' + height;
  }
</script>
<iframe>

Halaman Pembantu:

<script type="text/javascript">
  function resizeParentIframe() {
    var height = getParam('height');
    parent.parent.resizeIframe(height);
  }
  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&amp;#]*)");
    var results = regex.exec(window.location.href);
    return results ? results[1] : "";
  }
</script>

Nota:

Penyelesaian ini mengandaikan bahawa dasar asal yang sama membenarkan komunikasi JavaScript antara kandungan iframe dan halaman pembantu. Jika ini tidak berlaku, langkah tambahan mungkin diperlukan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Iframe Secara Dinamik Berdasarkan Ketinggian Kandungannya Merentas Domain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!