Because the iframe without borders can be seamlessly integrated with the web page, it is possible to update some data of the page without refreshing the page. However, the size of the iframe is not as "scalable" as the layer, so it brings problems in use. Trouble, too much is not good when setting the height of iframe, and less is even worse. Now, let me tell you a way to dynamically adjust the height of iframe, mainly the following JS function:
program code
function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
Finally, when adding an iframe, you cannot lose the onload attribute. Of course, the id must also match the win in the function.
program code
<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></ iframe>
iframe solution for another situation (super simple)
Important note: The web page address you must fill in in src= must be on the same site as this page, otherwise, an error will occur and say "Access Denied!" (Actually, this is because of the cross-domain problem of Js that leads to access denial. of)
I have encountered this problem before. I searched online to get the answer and found that many people have also encountered this problem. Now I will share the solution.
1. Create a bottom.js file and enter the following code (only two lines)
parent.document.all("frame ID name").style.height=document.body.scrollHeight;
parent.document.all("Frame ID name").style.width=document.body.scrollWidth;
The frame ID name here is the ID of the Iframe, for example:
＜IFRAME id="frame ID name" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"＞＜/IFRAME＞
2. Add each of the included files in your website
＜script language = "JavaScript" src = "bottom.js"/＞＜/script＞
3. OK, call it a day!
Passed the test under WINXP and IE6. It's very simple!
Implement adaptive height of iframe
Realize the adaptive height of iframe, which can automatically adapt with the length of the page to avoid the phenomenon of scroll bars appearing on the page and iframe at the same time.
program code
<script type="text/javascript">
//** iframe automatically adapts to the page**//
//Enter a list of names of iframes that you want to automatically adjust their height based on the height of the page
//Separate the ID of each iframe with a comma. For example: ["myframe1", "myframe2"], there can be only one form, so no comma is needed.
//Define the ID of the iframe
var iframeids=["test"]
//If the user's browser does not support iframe, whether to hide the iframe, yes means hidden, no means not hidden.
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//Automatically adjust iframe height
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //If the user's browser is NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //If the user's browser is IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//According to the set parameters, handle the display problems of browsers that do not support iframe
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1608312