Skip to content

Instantly share code, notes, and snippets.

@tylerhall

tylerhall/domain1-index.html

Created August 19, 2010 21:03
Show Gist options
  • Save tylerhall/538909 to your computer and use it in GitHub Desktop.
Save tylerhall/538909 to your computer and use it in GitHub Desktop.
Download ZIP
Cross-domain way to resize an iFrame from within the frame itself.
Raw
domain1-index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<script type="text/javascript" charset="utf-8">
function resizeFrame(newHeight) {
document.getElementById('theFrame').height = newHeight;
}
</script>
</head>
<body>
<h1>Main Page</h1>
<iframe id="theFrame" src="http://domain2/iframe.html" width="300" height="80"></iframe>
</body>
</html>
Raw
domain1-resizer.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var height = parseInt(window.location.href.split('=')[1]);
window.top.resizeFrame(height);
}
</script>
</head>
<body>
</body>
</html>
Raw
domain2-iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
document.getElementById('btnChange').onclick = function() {
frame = document.createElement('IFRAME');
frame.style.display = 'none';
frame.setAttribute("src", 'http://domain1/resizer.html?height=' + document.getElementById('height').value);
document.body.appendChild(frame);
}
}
</script>
</head>
<body>
Pick a new height for this iFrame<br>
<input type="text" name="height" value="500" id="height">
<input type="submit" name="btnChange" value="Change Height" id="btnChange">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment