Skip to content

Instantly share code, notes, and snippets.

@richyrb00
Last active July 31, 2017 14:02
Show Gist options
  • Save richyrb00/96d7f212da79e9a8ef8d12250b6bdb70 to your computer and use it in GitHub Desktop.
Save richyrb00/96d7f212da79e9a8ef8d12250b6bdb70 to your computer and use it in GitHub Desktop.
Dynamic Iframe Resizing ( No scroll will appear when the content of an Iframe changes the height. )
<html>
<head>
<title> Content inside an IFRAME </title>
</head>
<body>
<div>
<button id="btn" onclick="addParagraph()">Add Paragraph</button>
<p>I am content that will be inside an IFRAME</p>
</div>
</body>
<script>
$(document).
on('click', '#btn', function(){
$('p').append("<p>I'm another paragraph</p>")
sendHeight()
});
</script>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
(function($) {
sendHeight = function(){
height = $('body').height();
window.parent.postMessage({"height": height}, "*")
}
$(document).ready(function(){
$(window).on('resize', sendHeight)
$(document).
on('click', '#btn', function(){
sendHeight();
})
})
})(jQuery);
</script>
</html>
<html>
<head>
<title>Website Page</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--
This script will grab the post message from frame.html which
contains the height value and on resize of the browser change the height of the iframe
//-->
<script>
window.addEventListener('message', function(event) {
if(height = event.data['height']) {
console.log(height)
$('iframe').css('height', height + 'px')
}
})
</script>
<iframe src="frame.html"></iframe>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment