Home > Developer > JavaScript
Copy codeThe Code is as follows:
Var iframeids = ['memberindexiframe', 'infirycenteriframe', 'everychinabbsiframework'];
Var iframehide = "yes ";
Function dynIframeSize (){
Var dyniframe = [];
For (var I = 0; I <iframeids. length; I ++ ){
If (! Document. getElementById) return false;
Dyniframe [I] = document. getElementById (iframeids [I]);
If (dyniframe [I] &! Window. opera ){
Dyniframe [I]. style. display = "block ";
If (dyniframe [I]. contentDocument & dyniframe [I]. contentDocument. body. offsetHeight ){
Dyniframe [I]. height = dyniframe [I]. contentDocument. body. offsetHeight;
} Else if (dyniframe [I]. Document & dyniframe [I]. Document. body. scrollHeight ){
Dyniframe [I]. height = dyniframe [I]. Document. body. scrollHeight;
}
}
If (document. all | document. getElement) & iframeids = "no "){
Var tempobj = document. all? Document. all [iframeids [I]: document. getElementById (iframeids [I]);
Tempobj. style. display = "block ";
}
}
}
If (window. addEventListener)
Window. addEventListener ("load", dynIframeSize, false)
Else if (window. attachEvent)
Window. attachEvent ("onload", dynIframeSize)
Else {
Window. onload = dynIframeSize;
}
Save an iframe. js file for the above code and then reference it.
Note: This code is not applicable to cross-domain iframe reference and needs to define its iframe height.
The following code shows the cross-origin iframe height.
The project website needs to embed pages of the partner website, which requires adaptive height changes of the page and cross-origin. I read a lot of information on the Internet and added my own practices to realize the cross-domain IFrame adaptive height. As follows:
First, I used a.html#to access B .html on the page. Here I use iframe to apply the page.
The main code of the.html page is as follows:
Copy codeThe Code is as follows:
<BODY>
<Iframe width = "100%" id = "a_iframe" name = "a_iframe" src = "http: // peer domain name/B .html"
Frameborder = "no" border = "0px" scrolling = "no" allowtransparency = "yes"> </iframe>
</BODY>
A. html page is only used to introduce a simple page of the target page.
However, it is better to create an agent.html page under a.htmlat the same level. This page is used to obtain parameters passed by the other Party through js,
To adjust the_iframe height in a.html. The main code is as follows:
Js Code
Copy codeThe Code is as follows:
<Script type = "text/javascript">
// Get a_iframe in a.html
Var a_iframe = parent.parent.doc ument. getElementById ("a_iframe ");
// <SPAN> location. hash is used to obtain the tag value of a page </SPAN>
This value is changed by using the js function in B .html. Including the height attribute
Var hash_url = window. location. hash;
// The height attribute passed in B .html
Var hash_height = hash_url.split ("#") [1] + "px ";
// Adjust the height of a_iframe to achieve adaptive
A_iframe.height = hash_height;
</Script>
Finally, add the following javascript code to the page (B .html) of the peer.
Copy codeThe Code is as follows:
<Iframe id = "B _iframe" width = "100%" src = "http: // my domain name/../agent.html" style = "display: none">
</Iframe>
<Script type = "text/javascript">
Var B _height = Math. max (document. body. scrollHeight, document. body. clientHeight );
Var B _iframe = document. getElementById ("B _iframe ");
B _iframe.src = B _frame.src + "#" + B _height;
</Script>
Math. max (clientHeight, scrollHeight) is used to compare the visible area of a webpage with the height of the webpage text,
Iframetransmits this heighttool to my agent.html through src. in this example, iframein a.html can reach the B .html height of the opposite side. It is okay to test in IE, but not in other browsers.
In the process of implementing this function, I found a piece of js useful for getting the page height on the Internet. Here I also record and reference it:
Copy codeThe Code is as follows:
<Script>
Var strInfo = "";
StrInfo + = "\ r \ n visible area width of the webpage:" + document. body. clientWidth;
StrInfo + = "\ r \ n visible area of the webpage:" + document. body. clientHeight;
StrInfo + = "\ r \ n visible area width of the webpage:" + document. body. offsetWidth + "(including the width of the edge )";
StrInfo + = "\ r \ n visible area height of the webpage:" + document. body. offsetHeight + "(including the width of the edge )";
StrInfo + = "\ r \ n webpage body full text width:" + document. body. scrollWidth;
StrInfo + = "\ r \ n webpage text Height:" + document. body. scrollHeight;
StrInfo + = "\ r \ n height of the webpage to which the webpage is rolled:" + document. body. scrollTop;
StrInfo + = "\ r \ n left when the webpage is rolled:" + document. body. scrollLeft;
StrInfo + = "\ r \ n webpage body part:" + window. screenTop;
StrInfo + = "\ r \ n left part of the webpage body:" + window. screenLeft;
StrInfo + = "\ r \ n screen resolution height:" + window. screen. height;
StrInfo + = "\ r \ n screen resolution width:" + window. screen. width;
StrInfo + = "\ r \ n available workspace Height:" + window. screen. availHeight;
StrInfo + = "\ r \ n available workspace width of the screen:" + window. screen. availWidth;
Window. confirm (strInfo );
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
