How Can I Dynamically Adjust Iframe Height While Bypassing the Same-Origin Policy?

Dynamic Iframe Height Adjustment

When integrating content from external sources via iframes, ensuring proper height adjustment becomes crucial. This article delves into a solution that circumvents the same-origin policy, allowing iframes to automatically resize to accommodate their content.

Exploiting Browser Quirks to Bypass the Same-Origin Policy

The key lies in leveraging a browser quirk that permits a parent domain to communicate with an iframe, while the iframe cannot communicate directly with its parent. This communication hierarchy is illustrated below:

Page	Can Communicate With
www.foo.com/home.html	N/A (parent)
www.bar.net/framed.html	www.foo.com/helper.html (child)
www.foo.com/helper.html	www.foo.com/home.html (parent)

Passing Height Information Using URL Arguments

To determine the iframe's height, the content page (www.bar.net/framed.html) calculates it and sets the src attribute of a helper iframe (located on the same domain as the parent) via a URL argument. The helper iframe then forwards this information to the parent, which can adjust the iframe height accordingly.

Code Implementation

www.foo.com/home.html (Parent Page):

function resizeIframe(height) {
  // Adjust the iframe height with a slight margin
  document.getElementById('frame_name_here').height = parseInt(height) + 60;
}

www.bar.net/framed.html (Child Page):

function iframeResizePipe() {
  // Calculate and pass the height to the helper iframe
  var height = document.body.scrollHeight;
  var pipe = document.getElementById('helpframe');
  pipe.src = 'http://www.foo.com/helper.html?height=' + height + '&cacheb=' + Math.random();
}

www.foo.com/helper.html (Helper Page):

function parentIframeResize() {
  // Extract the height from the URL argument
  var height = getParam('height');

  // Communicate the height to the parent page
  parent.parent.resizeIframe(height);
}

The above is the detailed content of How Can I Dynamically Adjust Iframe Height While Bypassing the Same-Origin Policy?. For more information, please follow other related articles on the PHP Chinese website!