set-iframe-height

cross-domain responsive iframes: automatically set iframe height to fit iframe content

Showing:

Popularity

Downloads/wk

9

GitHub Stars

43

Maintenance

Last Commit

2yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

1.0KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

setIframeHeight

Automatically adjust iframe height to fit the lenght of the displayed page - works cross-domain

Demo

http://faiblug.github.io/setIframeHeight/

Usage

Parent Page

1. Include iframe

<iframe scrolling="no" src="..."></iframe>

2. Include Script

<script src="dist/set-iframe-height-parent-min.js" async></script>

Iframe Page

1. Include Script

<script src="dist/set-iframe-height-child-min.js" async></script>

Advanced Options

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.

Events

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);
});

Support for amp-iframe (Accelerated Mobile Pages Project)

Demo

For implementation details, check the demo sourcecode and the amp-iframe documentation

Thanks to mthiele for this contribution.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100