Copy the codeThe code is as follows:
var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe'];
var iframehide = "yes";
function dynIframeSize(){
var dyniframe = [];
for(var i=0;i<;i++){
if(!) return false;
dyniframe[i] = (iframeids[i]);
if(dyniframe[i] && !){
dyniframe[i]. = "block";
if(dyniframe[i].contentDocument && dyniframe[i].){
dyniframe[i].height = dyniframe[i].;
}else if(dyniframe[i].Document && dyniframe[i].){
dyniframe[i].height = dyniframe[i].;
}
}
if(( || ) && iframeids == "no") {
var tempobj = ?[iframeids[i]] : (iframeids[i]);
= "block";
}
}
}
if ()
("load", dynIframeSize, false)
else if ()
("onload", dynIframeSize)
else {
= dynIframeSize;
}
For the above code, save a file directly and then reference it
Note: This code is not very suitable for cross-domain iframe references, and it needs to specifically define its iframe height.
The following code is the cross-domain iframe height
The project website needs to embed the page of the cooperative website, which requires the adaptive and highly variable pages and are cross-domain. After reading a lot of information online and with my own practice, I finally realized the cross-domain IFrame adaptive height. as follows:
First of all, my page needs to be introduced to the other party, here I use the iframe method to implement the page application
The main code of the page is as follows:
Copy the codeThe code is as follows:
<BODY>
<iframe width="100%" name="a_iframe" src="http://opposite domain name/"
frameborder="no" border="0px" scrolling="no" allowtransparency="yes" ></iframe>
</BODY>
The page is just a simple page used to introduce the other party's page. I won't introduce it more.
Then, it is best to create a page in the same level directory, which is used to get the parameters passed by the other party through js.
Adjust the height of a_iframe according to the height parameter. The main code is as follows:
Js code
Copy the codeThe code is as follows:
<script type="text/javascript">
//Get the a_iframe
var a_iframe = ("a_iframe");
//<SPAN> used to obtain the tag value of the page</SPAN>
, this value is changed through the js function in it. Include height attribute
var hash_url = ;
//Get the passed height attribute
var hash_height = hash_url.split("#")[1]+"px";
//Adjust the height of a_iframe to achieve adaptive
a_iframe.height = hash_height;
</script>
Finally, the other party's page(), let the other party add the following javascript code to it
Copy the codeThe code is as follows:
<iframe width="100%" src="http://my domain/../" style="display:none">
</iframe>
<script type="text/javascript">
var b_height = (,);
var b_iframe = ("b_iframe");
b_iframe.src = b_frame.src+"#"+b_height;
</script>
After comparing the visible area of the web page (clientHeight, scrollHeight) to obtain the larger value,
The iframe passes this height to mine through src, so that the Iframe can adapt to the other party's height. There is no problem testing here under IE, and other browsers have not tested it.
In the process of implementing this function, I found a very useful JS to obtain the page height on the Internet. I will also record and quote it here:
Copy the codeThe code is as follows:
<script>
var strInfo=" " ;
strInfo+=" \r\nVisible area width of web page:" +;
strInfo+=" \r\nVisible area height of web page:" +;
strInfo+=" \r\nVisible area width of web page: "++" (including the width of the edge line)";
strInfo+=" \r\nVisible area height of web pages: "++" (including the width of the edge line)";
strInfo+=" \r\nThe full text width of the web page:" +;
strInfo+=" \r\nThe full text of the web page is high:" +;
strInfo+=" \r\nThe web page is rolled out high:" +;
strInfo+=" \r\nThe left of the web page being rolled out:" +;
strInfo+=" \r\nOn the web page body part:" +;
strInfo+=" \r\nThe left part of the web page text:" +;
strInfo+=" \r\nHigh screen resolution:" +;
strInfo+=" \r\nWidth of screen resolution:" +;
strInfo+=" \r\nScreen available workspace height:" +;
strInfo+=" \r\nScreen available workspace width:" +;
(strInfo);
</script>