Skip to content

Instantly share code, notes, and snippets.

@BretCameron
Created July 16, 2019 16:20
Show Gist options
  • Save BretCameron/3aa91bce3f7331b2a58972ca9ed51402 to your computer and use it in GitHub Desktop.
Save BretCameron/3aa91bce3f7331b2a58972ca9ed51402 to your computer and use it in GitHub Desktop.
An HTML file containing an iframe, the height of which changes automatically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<title>Parent File</title>
</head>
<body>
<iframe id="iframe" src="child.html" style="width:100%;border:none;"></iframe>
<script>
window.onmessage = (e) => {
if (e.data.hasOwnProperty("frameHeight")) {
document.getElementById("iframe").style.height = `${e.data.frameHeight + 30}px`;
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment