title: Javascript --> iframe resizing using postMessage method
body: <p>I'm trying to understand another Stackoverflow answer (<a href="https://stackoverflow.com/questions/5606920/cross-domain-iframe-resizer/6940531#6940531">cross-domain iframe resizer?</a>) that purports to solve how to resize an <code>iframe</code> (hosted on a domain separate from the domain it's embedded in) according to its height. Wondering if anyone could answer my questions below.</p>
  
  <p><strong>THE SOLUTION:</strong></p>
  
  <p>Iframe:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');"&gt;
    &lt;h3&gt;Got post?&lt;/h3&gt;
    &lt;p&gt;Lots of stuff here which will be inside the iframe.&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The parent page which contains the iframe (and would like to know its height):</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     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);
    }
  &lt;/script&gt;
  
  &lt;iframe src='http://example.com/page_containing_iframe.html' id="my_iframe"     onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');"&gt;
  &lt;/iframe&gt;
  </code></pre>
  
  <p><strong>MY QUESTIONS:</strong></p>
  
  <ol>
  <li><a href="http://target.domain.com" rel="nofollow noreferrer">http://target.domain.com</a> refers to the domain the iframe is<br>
  embedded within, right? NOT the domain that the iframe is hosted on?</li>
  <li><p>In the <code>function resizeCrossDomainIframe(id, other_domain) {</code> line, I'm not supposed to interchange "id" with the <code>id</code> of the <code>iframe</code> 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.</p></li>
  <li><p>Instead of using <code>onload</code> within the <code>iframe</code> tag, I wrote the equivalent in jQuery, which loads on the page that embeds the iframe:</p>
  
  <p><code>$('#petition-embed').load(function() {
       resizeCrossDomainIframe('petition-embed','http://target.domain.com');
   });</code></p></li>
  <li><p>I added brackets around return:</p>
  
  <p><code>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</code></p></li>
  </ol>
  
  <p>Does that look right?</p>