Skip to content

Instantly share code, notes, and snippets.

@ninjapanzer

ninjapanzer/frame.html

Last active December 14, 2015 12:18
Show Gist options
  • Save ninjapanzer/5085116 to your computer and use it in GitHub Desktop.
Save ninjapanzer/5085116 to your computer and use it in GitHub Desktop.
Download ZIP
Some cross browser iframe testing for responsive iframes. All vanilla JS and some simple styles
Raw
index.html
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
<script>
var happy
function onload(){
//window.frames['mainView'].document.body.onresize = function(){console.log("thing")}
document.body.onresize = function(){
document.getElementById('mainView').contentWindow.location.reload();
}
happy = document.getElementById("mainView")
}
function frameloader(){
var script = document.createElement("script");
script.type ="text/javascript"
script.innerText = "onresize = function(){document.location.reload()};";
window.frames['mainView'].document.body.appendChild(script);
//window.frames['mainView'].document.onload = function(){console.log("thing")};
}
</script>
<style>
iframe,#mainView{
margin:0px auto;
width:90%;
height:80em;
max-width:90%;
min-width:30%;
}
</style>
</head>
<body onload="">
<a href="http://google.com">Google</a>
<!--<iframe onload="frameloader()" id="mainView" src="http://localhost/frame.html"></iframe>-->
<iframe id="mainView" src="https://www.ableton.com/"></iframe>
</body>
</html>
@ninjapanzer
Copy link
Author

Ableton replacement without loaders to demonstrate the nature of IE iframes

@ninjapanzer
Copy link
Author

ableton.com is a well known responsive site. In IE 7-9 inside an iframe its behavior is a little crummy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment