A big problem about iframe height adaptive has perplexed me for a long time. Before I writed my blog website, I just wanted to use "iframe". However, the iframe height adaptive didn't work well in the static webpage. And I had make sure that there had no grammar mistakes in JS and browsers compatibility, but what was wrong? For a long time, I have searched the internet and books for help, and they only told me how to write the codes of height adaptive, nothing helped. But thanks god, today when I was looking for the "contentDocument" attribute, I saw a very significant sentence about "iframe", it says that iframe can only get values from the same domain. Great! Another words, if we only test the iframe height adaptive function in static pages, it won't work, because the parent page and the child page do not exist in the same domain! So, how to get it? Easy, put the static web pages to the server and it will work since they are in one domain in this case.
Therefore, in this blog, I will put some screenshots to illustrate THE REAL WAY TO IMPLEMENT IFRAME HEIGHT ADAPTIVE.
<iframe src="test.html" frameborder="0" id="myFrame"></iframe>
// parent page, and the "test.html" is the child page
2. CSS code
#myFrame{
left:10%;
top:10px;
width:80%;
border:1px solid #ccc;
} // parent
body{
height:1000px;
} // child
3. JS code
var myframe = document.getElementById("myFrame");
myframe.addEventListener("load", function(){
var temp = myframe.contentDocument.body;
myframe.height = temp.style.height;
}, false);
// for ie:
myframe.attachEvent("onload", function(){
var temp = myframe.contentWindow.document.body;
myframe.height = temp.style.height;
});
And the following are the results of static pages and pages in server. It would be obvious that there has nothing in static pages, but the iframe'height has been changed when pages are in server.
(That's all)