ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript 処理 Iframe 適応高さ (同じまたは異なるドメイン名の下)_JavaScript スキル

JavaScript 処理 Iframe 適応高さ (同じまたは異なるドメイン名の下)_JavaScript スキル

WBOYオリジナル: 2016-05-16 17:38:581481ブラウズ

1. 同一ドメイン名での Iframe 適応高さの処理

コードをコピーコードは次のとおりです:

 
 <br>
</div> <br>もちろん、ここでは Asp.Net MVC を使用しており、src はルーティング構造に設定されています <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="35723" class="copybut" id="copybut35723" onclick="doCopy('code35723')"> <u>コードをコピーします </u></a></span> コードは次のとおりです。 </div>
<div class="codebody" id="code35723"> <br><script type="text/javascript"> <br>function SetIFrameHeight(obj) { <br>var win = obj; <br>if (document.getElementById) { <br>if (win && !window.opera) { <br>if (win.contentDocument && win.contentDocument.body.offsetHeight) <br>win.height = win.contentDocument .body.offsetHeight; <br>else if (win.Document && win.Document.body.scrollHeight) <br>win.height = win.Document.body.scrollHeight; <br>} <br>} <br></script> <br><br> </div>使用されるのは、iframe ネストされたページが読み込まれるときに、onload イベントを使用して Web ページの高さを取得することです。 iframe にネストしてから、それを iframe に高さだけ割り当てます。 <br><br>2. iframe はドメインをまたぐ場合の適応性が高くなります <strong> </strong><br><div class="codetitle">
<span><a style="CURSOR: pointer" data="13696" class="copybut" id="copybut13696" onclick="doCopy('code13696')">コードをコピーします <u></u></a> コードは次のとおりです。 </span> </div> <div class="codebody" id="code13696">メイン ページとネストされた iframe のドメイン名が異なる場合、少し面倒になるため、JavaScript のクロスドメイン制限を回避する必要があります。 <br>原則: 3 つの既存の iframe メイン ページ main.html、iframe ネスト ページ iframe.html、および iframe 中間ページ agent.html があり、これらは main.html を通じて埋め込まれます (ドメイン名は http://www.ccvita.html)。 com) iframe.html (ドメイン名: http://www.phpq.net) を設定し、ユーザーが閲覧するときに、iframe.html 内の JavaScript コードを実行して、iframeC の scr アドレスに追加される iframe ページの高さを設定します。 Agent.html (ドメイン名: http://www.ccvita.com) は渡された高さを取得し、JavaScript を通じて main.html に iframe の高さを設定します。最後に望ましい目標を達成します。 <br><br>iframe メイン ページ main.html <br>[code] <br>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head>< ;title>iframe メイン ページ</title></head> <br><body><br><div style="border:1px Solid #ccc;padding:10px;"< iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0"scrolling="no" Frameborder="0"> ;/div> 

Tail
 
iframe ネストされたページ

コードをコピー

コードは次のとおりです: Iframe ページ

Text< ;br /> 
gt;
gt;
gt;
gt;
gt;
gt;
gt;

 br />テキスト

 ;br />gt;
gt;

テキスト
gt;

gt;
 ;
 
テキスト

 ;
gt;
gt;
gt;
gt;

&lt ;script type="text/javascript" "> <br>function sethash(){ <br>hashH = document.documentElement.scrollHeight; <br>urlC = "agent.html"; <br>document.getElementByIdx("iframeC ").src=urlC "# " hashH; <br>} <br>window.onload=sethash; <br></script> <br></body> <br></html> <br><br><br>iframe 仲介ページagent.html <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="34654" class="copybut" id="copybut34654" onclick="doCopy('code34654')"><u>コードをコピー </u></a></span> コードは次のとおりです: </div>
<div class="codebody" id="code34654"> <br> < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"< ;html xmlns ="http://www.w3.org/1999/xhtml"> <br><head><title>iframe 中間ページ</title></head> ; <br><script> <br>関数 pseth() { <br>var iObj =parent.parent.document.getElementByIdx('frame_content'); <br>iObjH =parent.parent.frames["frame_content"] .frames ["iframeC"].location.hash; <br>iObj.style.height = iObjH.split("#")[1] "px"; < /script> <br></html> <br><br> <br>コード内では、<br>main.html と agent.html が不完全なパス表現になっている可能性があります。ドメイン内の <br> と同じである必要があり、iframe.html は別のドメインにあります</div>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：画像の遅延読み込みの実装コード (遅延を模倣)_JavaScript スキル次の記事：画像の遅延読み込みの実装コード (遅延を模倣)_JavaScript スキル

続きを見る

JavaScript 処理 Iframe 適応高さ (同じまたは異なるドメイン名の下)_JavaScript スキル

関連記事