Automatically adjust iframe height to fit the lenght of the displayed page - works cross-domain
http://faiblug.github.io/setIframeHeight/
<iframe scrolling="no" src="..."></iframe>
<script src="dist/set-iframe-height-parent-min.js" async></script>
<script src="dist/set-iframe-height-child-min.js" async></script>
If you want you parent url to be updated whenever the iframe url changes, you need to supply a deep link pattern on the iframe tag:
<iframe src="..." data-iframeAutoHeight-deepLinkPattern="/path/to/parent-page/?iframe_target=%deepLinkIframeSrc%"></iframe>
When rendering your page, you need to validate the value of the iframe_target GET Parameter and if it is valid, you can put the value into the iframe src attribute.
This allows the user to reload, bookmark or share deep-linked iframe content within your parent frame.
If you need to take action whenever the deep link changes, e.g. to dynamically update social share buttons, you can listen to the window.setIframeHeight:deepLink:changed event:
window.addEventListener('setIframeHeight:deepLink:changed', function(e) {
console.log(e.detail);
// Object {childUrl: "http://..", parentUrl: "http://..."}
});
This event is fired in the parent page and in the iframe itself.
The following events are triggered on the window object of the parent page:
setIframeHeight: is periodically triggered (fires very often) setIframeHeight:enlarged: is triggered whenever the iframe got enlarged setIframeHeight:shrinked: is triggered whenever the iframe got shrinked
Example usage:
window.addEventListener('setIframeHeight:shrinked', function (e) {
console.log('iframe shrinked', e.detail);
});
window.addEventListener('setIframeHeight:enlarged', function (e) {
console.log('iframe enlarged', e.detail);
});
For implementation details, check the demo sourcecode and the amp-iframe documentation
Thanks to mthiele for this contribution.