Skip to content

Instantly share code, notes, and snippets.

@mohandere
Last active June 9, 2020 03:39
Show Gist options
  • Save mohandere/a2e67971858ee2c3999d62e3843889a8 to your computer and use it in GitHub Desktop.
Save mohandere/a2e67971858ee2c3999d62e3843889a8 to your computer and use it in GitHub Desktop.
Iframe height issue - make iframe height dynamic based on content inside
(function(){
'use-strict';
/**
* Iframe to Parent window communication
* sample iframe- <iframe id="guestFrame" name="guestFrame" src="http://other-domain.com/">
* </iframe>
* Uses https://ternarylabs.github.io/porthole/
* Uses https://marcj.github.io/css-element-queries/
*/
window.onload = function(){
var proxy = window.proxy = new Porthole.WindowProxy('http://parent-domain.com/');
proxy.addEventListener(function(messageEvent) {
// handle event
});
//Height setup
var iframeHeight = 0;
var element = document.getElementsByTagName("BODY")[0];
new ResizeSensor(element, function() {
var scrollHeight = $('body').outerHeight();
if (iframeHeight === scrollHeight) return false;
iframeHeight = scrollHeight;
proxy.post({
height: scrollHeight,
});
});
Porthole.WindowProxyDispatcher.start();
};
})();
(function(){
'use-strict';
//This soultion we have used - https://ternarylabs.github.io/porthole/
// example -
var iFrameId: 'guestFrame',
window.onload = function(){
// Create a proxy window to send to and receive
// messages from the iFrame
var windowProxy = new Porthole.WindowProxy(
'http://other-domain.com/', iFrameId);
var $viewPort = $('#'+iFrameId);
// Register an event handler to receive messages;
windowProxy.addEventListener(function(messageEvent) {
if( messageEvent.data.height == $viewPort.height() ){
return;
}
$viewPort.height(messageEvent.data.height);
});
Porthole.WindowProxyDispatcher.start();
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment