IFrame 교차 도메인 적응력이 뛰어난 구현 code_javascript 기술-JS 튜토리얼-php.cn

IFrame 교차 도메인 적응력이 뛰어난 구현 code_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:50:41

원래의

1036명이 탐색했습니다.

 
var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe' ]; 
var iframehide = "예"; 
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 = "차단"; 
} 
} 
} 
if (window.addEventListener) 
window.addEventListener("load", dynIframeSize, false) 
else if (window.attachEvent) 
window .attachEvent("onload", dynIframeSize) 
else { 
window.onload = dynIframeSize; 
} 

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

注意: 这段代码对于跨域的iframe引用不太适用,需要特别别义其iframe 높이

下side这个代码是跨域的iframe 높이
项目网站中需要嵌入join网站的页면,这就需要页면적 자동 높은 품질의 IFrame이 자체적으로 높은 수준을 제공합니다.

저희는 다음과 같습니다.页면a.html需要引入对方的b.html, 에서 iframe 方式实现页면적 사용
a.html页면적主要代码如下：

复代码码代码如下:

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

复主代码代码如下:

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

复代代码代码如下:

Math.max(clientHeight,scrollHeight)를 통해 웹페이지의 가시 영역 높이와 웹페이지 전체 텍스트의 높이를 비교하여 더 큰 값을 얻으며,
iframe은 이 높이를 내 에이전트에 전달합니다. .html부터 src까지, a.html의 Iframe이 상대방의 b.html 높이에 맞춰질 수 있도록 합니다. IE에서는 테스트 시 문제가 없으나, 다른 브라우저에서는 테스트를 해보지 않았습니다.
이 기능을 구현하는 과정에서 인터넷에서 페이지 높이를 가져오는 데 매우 유용한 js를 발견했습니다. 여기에도 기록되고 인용되어 있습니다.

복사 code 코드는 다음과 같습니다.

 
<script> <br>var strInfo=" " <br>strInfo=" rn웹 페이지의 표시 영역 너비 :" document.body .clientWidth; <br>strInfo =" rn웹페이지의 표시 영역 높이: " document.body.clientHeight; <br>strInfo ="rn의 표시 영역 너비 웹 페이지: " document.body.offsetWidth " (가장자리 너비 포함)" ; <br>strInfo =" rn웹 페이지의 가시 영역 높이: " document.body.offsetHeight "(가장자리 너비 포함) width of the edge)" ; <br>strInfo =" rn웹페이지 전체 텍스트의 너비: " document.body.scrollWidth; <br>strInfo = " rn웹페이지 전체 텍스트의 높이:" document.body .scrollHeight; <br>strInfo =" rn스크롤되는 웹페이지의 높이:" document.body.scrollTop; <br>strInfo =" rn스크롤되는 웹페이지의 왼쪽:" document.body.scrollLeft; =" rn웹페이지 본문:" window.screenTop; <br>strInfo =" rn웹페이지 본문:" window.screenLeft; <br>strInfo =" rn화면 해상도 높이: " window.screen. height; <br>strInfo =" rn화면 해상도의 너비: " window.screen.width; <br>strInfo =" rn화면의 사용 가능한 작업 영역 높이: " window.screen.availHeight; >strInfo =" rn화면 사용 가능한 작업 공간 너비:" window.screen.availWidth <br>window.confirm(strInfo) <br></script>