IFrame cross-domain highly adaptive implementation code_javascript skills-JS Tutorial-php.cn

IFrame cross-domain highly adaptive implementation code_javascript skills

WBOY

Release： 2016-05-16 17:50:41

Original

1036 people have browsed it

 
var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe']; 
var iframehide = "yes"; 
function dynIframeSize(){ 
var dyniframe = []; 
for(var i=0;iif(!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; 
} 

对于上面的代码直接保存一个文件iframe.js，然后引用即可

注意：这段代码对于跨域的iframe引用不太适用，需要特别定义其iframe高度

下面这个代码是跨域的iframe高度

项目网站中需要嵌入合作网站的页面，这就需要页面的自适应高度变化，并且是跨域的。在网上看了许多资料，加上自己的实践，终于实现了跨域的IFrame自适应高度。如下：

首先，我的页面a.html需要引入对方的b.html,在这里运用iframe方式实现页面的套用
a.html页面的主要代码如下：

复制代码代码如下:

a.html页面只是用来引入对方页面的一个简单页面这就不多做介绍。
然后，最好在a.html同一级目录下，创建一个agent.html页面，该页面用来得到对方通过js传递过来的参数，
根据高度参数来调整a.html中的a_iframe的高度，主要代码如下：
Js代码

复制代码代码如下:

最后，对方的页面(b.html),让对方在b.html中加入以下javascript代码

复制代码代码如下:

Compare the height of the visible area of the webpage and the height of the full text of the webpage through Math.max(clientHeight,scrollHeight) to get the larger value,
iframe passes this height to my agent.html through src , so that the Iframe in a.html can adapt to the height of the other party's b.html. There is no problem when tested under IE, but other browsers have not been tested.
In the process of implementing this function, I found a very useful js for getting the page height on the Internet, which is also recorded and quoted here:

Copy code The code is as follows:

 
<script> <br>var strInfo=" "; <br>strInfo=" rnVisible area width of web page:" document.body .clientWidth; <br>strInfo =" rnThe height of the visible area of ​​the web page: " document.body.clientHeight; <br>strInfo =" The width of the visible area of ​​rn the web page: " document.body.offsetWidth " (including the width of the edge)" ; <br>strInfo =" rnThe height of the visible area of ​​the web page: " document.body.offsetHeight " (including the width of the edge)" ; <br>strInfo =" rnThe width of the full text of the web page: " document.body.scrollWidth; <br>strInfo = " rnHeight of the full text of the webpage:" document.body.scrollHeight; <br>strInfo =" rnThe height of the webpage being scrolled:" document.body.scrollTop; <br>strInfo =" rnThe left side of the webpage being scrolled:" document.body.scrollLeft; <br>strInfo =" rnThe main body of the web page:" window.screenTop; <br>strInfo =" rnThe main body of the web page:" window.screenLeft; <br>strInfo =" rnScreen resolution The height: " window.screen.height; <br>strInfo =" rnThe width of the screen resolution: " window.screen.width; <br>strInfo =" rnThe height of the available work area of ​​the screen: " window.screen.availHeight; <br>strInfo =" rnScreen available workspace width:" window.screen.availWidth; <br>window.confirm(strInfo); <br></script> 