How Can I Dynamically Resize an Iframe Based on its Content Height Across Domains?

Resizing an Iframe Based on Content Height

When working with iframes to display content from other domains, adjusting their height to fit the contents can be a challenge due to the same-origin policy. This policy restricts JavaScript communication between pages on different domains.

Solution:

To overcome this limitation, a multi-step approach is required that involves both the iframe content and the framing page.

1. Cross-Domain Communication:

Since the iframe content and the framing page are on different domains, direct communication is not possible. However, a "pipe" mechanism can be established using another iframe.

2. Height Calculation and Message Passing:

When the iframe content loads, it calculates its height and sets the source of a hidden iframe on the framing page to a helper page on the same domain, passing the calculated height as an argument in the URL.

3. Helper Page and Parent Frame Resize:

The helper page on the same domain receives the height from the iframe content and communicates it to the parent frame, which can then resize the iframe accordingly.

Code:

Framing Page:

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

Iframe Content:

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

Helper Page:

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

Note:

This solution assumes that the same-origin policy allows JavaScript communication between the iframe content and the helper page. If this is not the case, additional measures may be required.

The above is the detailed content of How Can I Dynamically Resize an Iframe Based on its Content Height Across Domains?. For more information, please follow other related articles on the PHP Chinese website!