When you use iframe on the page, you generally do not want the iframe to display an ugly scroll bar to integrate the content in the iframe with the content on the home page. At this time, you will set the scrolling = "no" attribute. However, if the content in the iframe changes and the height changes, your iframe will become too long, leading to a large blank space, or, on the contrary, some content is blocked because the iframe height is too small. Here I provide a javascript script compatible with IE, NS, and Firefox to dynamically adjust the iframe height. If you need to adjust the width, the principle is the same. This article will not detail it.
First, you must include the following javascript code on your home page:
Copy codeThe Code is as follows:
<Script language = "Javascript">
Var getFFVersion = navigator. userAgent. substring (navigator. userAgent. indexOf ("Firefox"). split ("/") [1]
// Extra height in px to add to iframe in FireFox 1.0 + browsers
Var FFextraHeight = getFFVersion >=0.1? 16: 0
Function dyniframesize (iframename ){
Var pTar = null;
If (document. getElementById ){
PTar = document. getElementById (iframename );
}
Else {
Eval ('ptar = '+ iframename + ';');
}
If (pTar &&! Window. opera ){
// Begin resizing iframe
PTar. style. display = "block"
If (pTar. contentDocument & pTar. contentDocument. body. offsetHeight ){
// Ns6 syntax
PTar. height = pTar. contentDocument. body. offsetHeight + FFextraHeight;
}
Else if (pTar. Document & pTar. Document. body. scrollHeight ){
// Ie5 + syntax
PTar. height = pTar. Document. body. scrollHeight;
}
}
}
</Script>
Then add code to the place where iframe is used on the home page:
<Iframe id = "myTestFrameID"
Onload = "javascript: {dyniframesize ('mytestframeid ');}"
Marginwidth = 0 marginheight = 0 frameborder = 0
Scrolling = no src = "/myiframesrc. php"