Skip to content

Instantly share code, notes, and snippets.

@i556
Created January 23, 2012 08:10
Show Gist options
  • Save i556/1661623 to your computer and use it in GitHub Desktop.
Save i556/1661623 to your computer and use it in GitHub Desktop.
Cross Domain iframe Resizing
http://mohumohu/parent.html
http://hogehoge.com/iframe.html
//parent.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
window.addEventListener("message", receiveSize, false);
function receiveSize(e) {
if (e.origin === "http://hogehoge.com") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
document.getElementById("bar").style.height = e.data + "px";
}
</script>
</head>
<body>
<iframe id="bar" src="http://hogehoge.com/iframe.html" scrolling="no" >
</iframe>
</body>
</html>
//iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript">
window.addEventListener("load", postSize, false);
function postSize(e){
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
if (typeof target != "undefined" && document.body.scrollHeight)
target.postMessage(document.getElementById("foo").scrollHeight, "*");
}
</script>
</head>
<body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment