cross-domain iframe resizer?

by

If your users are on modern browsers, you can solve this quite easily with postMessage in HTML5. Here’s a quick solution which works well:

The iframe page:

<!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>

More Related Contents:

  1. How can I access the contents of an iframe with JavaScript/jQuery?
  2. Frame Buster Buster … buster code needed
  3. How to get the body’s content of an iframe in Javascript?
  4. Make iframe automatically adjust height according to the contents without using scrollbar? [duplicate]
  5. Get current URL from IFRAME
  6. How to set an iframe src attribute from a variable in AngularJS
  7. How to identify if a webpage is being loaded inside an iframe or directly into the browser window?
  8. Access elements of parent window from iframe
  9. How to check if iframe is loaded or it has a content?
  10. cross-domain iframe resize
  11. javascript access parent DOM across domains?
  12. Detect iFrame embedding in Javascript
  13. How do I implement Cross Domain URL Access from an Iframe using Javascript?
  14. Is there a way to have content from an IFRAME overflow onto the parent frame?
  15. Get IFrame’s document, from JavaScript in main document
  16. Write elements into a child iframe using Javascript or jQuery
  17. using javascript to detect whether the url exists before display in iframe
  18. Uncaught DOMException: Blocked a frame with origin “http://localhost:8080” from accessing a cross-origin frame while listing the iframes in page
  19. Good Reasons why not to use Iframes in page content [closed]
  20. How to set HTML content into an iframe
  21. Open link in iframe [closed]
  22. Set variable in parent window from iframe
  23. Youtube iframe api not triggering onYouTubeIframeAPIReady
  24. Refresh iFrame (Cache Issue)
  25. accessing a form that is in an iframe
  26. Youtube embed: Unsafe JavaScript attempt to access frame
  27. Iframe inherit from parent
  28. Get height of iframe with external URL
  29. Why is iframe.contentWindow == null?
  30. How to pass parameters through iframe from parent html?

Leave a Comment