IFrame クロスドメインの適応性の高い実装コード_JavaScript スキル

复制代 代码如下:

var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe' ];
var iframehide = "はい";
関数 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 = "ブロック";
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)
ウィンドウ.attachEvent("onload", dynIframeSize)
else {
window.onload = dynIframeSize;
}

上の代コードに直接保存されているファイル iframe.js をすぐに参照できます

注意:この段代コードはフィールド全域の iframe を参照できません。 iframe の高さを特に指定する必要があります

下にあるこの代コードは、フィールド全体の iframe の高さです

目地网站内に嵌合作网站の页面が必要です、これには页面の自适应が必要ですネットワーク上では、広範囲にわたる IFrame の適切な高さを実現するために、多くのリソースが追加されています。挿入された方の b.html、ここでは iframe 方式で実現される
a.html页面の主要代コード:

代制コード代码如下:

a.html 面は、対向面の 1 つの単一の面にのみ使用されます。

その後、a.html の同じ階層でエージェントを構築するのが望ましいです。 html 面、この面は、js 経由で来るパラメータ、
高さのパラメータに基づいて a.html 内の a_iframe の高さを調整するために使用されます。 >

复制代码

代码如下: //a.html 中の a_iframe を取得 var a_iframe =parent.parent.document.getElementById("a_iframe"); //location.hash 用来取页面の标签值

、この値は b.html 内の js 関数によって変更されます。

//b.html に到達する高さのプロパティ
var hash_height = hash_url.split("#")[1] "px";
//a_iframe の高さを調整し、自発的に送信
a_iframe.height = hash_height;



最後に、对方の页面(b.html)、让对方在b.html に以下の 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;

Math.max(clientHeight,scrollHeight) を通じて Web ページの表示領域の高さと Web ページの全文の高さを比較し、大きい方の値を取得します。
iframe はこの高さをエージェントに渡します.html から src を介して、 a.html の Iframe が相手の b.html の高さに適応できるようにします。 IEでのテストでは問題ありませんが、その他のブラウザではテストを行っておりません。
この関数を実装する過程で、インターネット上でページの高さを取得するための非常に便利な js を見つけました。これも記録され、ここに引用されています:

Copy code コードは次のとおりです:

<script> <BR>var strInfo=" " <BR>strInfo=" rnWeb ページの表示領域の幅:" document.body .clientWidth; <BR>strInfo =" rnWeb ページの表示領域の高さ: " document.body.clientHeight; <BR>strInfo =" rn の表示領域の幅Web ページ: " document.body.offsetWidth " (端の幅を含む)" ; <BR>strInfo =" rnWeb ページの表示領域の高さ: " document.body.offsetHeight " (端の幅を含む)端の幅)" ; <BR>strInfo =" rnWeb ページの全文の幅: " document.body.scrollWidth; <BR>strInfo = " rnWeb ページの全文の高さ:" document.body .scrollHeight; <BR>strInfo =" rnスクロールされる Web ページの高さ:" document.body.scrollTop; <BR>strInfo =" rn スクロールされる Web ページの左側:" document.body.scrollLeft; =" rnWeb ページの本体:" window.screenTop; <BR>strInfo =" rnWeb ページの本体:" window.screenLeft; <BR>strInfo =" rn画面の解像度 高さ: " window.screen. height; <BR>strInfo =" rn画面解像度の幅: " window.screen.width; <BR>strInfo =" rn 画面の利用可能な作業領域の高さ: " window.screen.availHeight; >strInfo = rnScreen の使用可能なワークスペースの幅:" window.screen.availWidth; <BR></script>