1

I'm trying to understand another Stackoverflow answer (cross-domain iframe resizer?) that purports to solve how to resize an iframe (hosted on a domain separate from the domain it's embedded in) according to its height. Wondering if anyone could answer my questions below.

THE SOLUTION:

Iframe:

 <!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
  <h3>Got post?</h3>
  <p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>

The parent page which contains the iframe (and would like to know its height):

<script type="text/javascript">
   function resizeCrossDomainIframe(id, other_domain) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      if (event.origin !== other_domain) return; // only accept messages from the specified domain
      if (isNaN(event.data)) return; // only accept something which can be parsed as a number
      var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
      iframe.height = height + "px";
    }, false);
  }
</script>

<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe"     onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>

MY QUESTIONS:

  1. http://target.domain.com refers to the domain the iframe is
    embedded within, right? NOT the domain that the iframe is hosted on?
  2. In the function resizeCrossDomainIframe(id, other_domain) { line, I'm not supposed to interchange "id" with the id of the iframe and "other_domain" with the domain name that the iframe is hosted on, right? They're only parameters that I specify later when I call the function.

  3. Instead of using onload within the iframe tag, I wrote the equivalent in jQuery, which loads on the page that embeds the iframe:

    $('#petition-embed').load(function() { resizeCrossDomainIframe('petition-embed','http://target.domain.com'); });

  4. I added brackets around return:

    if (event.origin !== other_domain) {return;} // only accept messages from the specified domain if (isNaN(event.data)) {return;} // only accept something which can be parsed as a number

Does that look right?

1 Answer 1

2

I needed to do something similar, and found this example that seems simpler: using postmessage to refresh iframe's parent document

Here is what I ended up with in the iframe:

window.onload = function() {
  window.parent.postMessage(document.body.scrollHeight, 'http://targetdomain.com');
}

And in the receiving parent:

window.addEventListener('message', receiveMessage, false);

function receiveMessage(evt){
  if (evt.origin === 'http://sendingdomain.com') {
    console.log("got message: "+evt.data);
    //Set the height on your iframe here
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.