iframeウィンドウ高度適応の実現方法
7433 ワード
domanAにはウェブページindex.があります.iframeを通じてdomanBのページotherを嵌め込みました.other.のページはiframeに表示されます.また、ページの内容はダイナミックに増加したり、減少したりします.今はiframeのスクロールバーを削除します.javascriptの同ソース戦略の制限のため、ドメイン横断操作ができません.プロキシページを紹介したり、仲介agent.と呼んだりして、domanAに属してから、domanBのother.の中でiframeを使ってagent.を入れ子にします.
はい、今の状況はこうです.index.はiframeネストother.httmlother.を使ってiframe巻き込みagent.htmlを使って第3ページのagent.を導入するのは、同じソースポリシーのルールを守るために、異なるdomainの下でパラメータの伝達を完了します.
私達の最終的な目的はスクロールバーを削除することと、埋め込まれたページの内容が全部表示されることを保証することです.1.other.ページの実際の高さheight 2を取得します.heightを埋め込まれたiframeのsrc属性に設定します.3.agent.ject.でiframeのsrc属性の中のheight値を切り取ります.
以下の例では、set Interval()を使用してiframeを常に設定することを避けるテクニックを使用しています.iframeのsrcにタイムスタンプを付加して、ブラウザにagent.hmlのjs関数invokethMeodInTopWindow()を実行domannAの中の2つのhtlinmdextdextch.を追加します.
はい、今の状況はこうです.index.はiframeネストother.httmlother.を使ってiframe巻き込みagent.htmlを使って第3ページのagent.を導入するのは、同じソースポリシーのルールを守るために、異なるdomainの下でパラメータの伝達を完了します.
私達の最終的な目的はスクロールバーを削除することと、埋め込まれたページの内容が全部表示されることを保証することです.1.other.ページの実際の高さheight 2を取得します.heightを埋め込まれたiframeのsrc属性に設定します.3.agent.ject.でiframeのsrc属性の中のheight値を切り取ります.
以下の例では、set Interval()を使用してiframeを常に設定することを避けるテクニックを使用しています.iframeのsrcにタイムスタンプを付加して、ブラウザにagent.hmlのjs関数invokethMeodInTopWindow()を実行domannAの中の2つのhtlinmdextdextch.を追加します.
#{extends 'main.html' /}
#{set title:'Home' /}
--- , , iframe , ,
<br> function resize(height) {<br> //alert("resize");<br> document.getElementsByName("domainB")[0].height=height;<br> }<br>
agent.
Insert title here
!
<br> window.onload = invokeMethodInTopWindow;
<br> function invokeMethodInTopWindow() {
<br> //alert(" , iframe ");
<br> var domainA = document.parentWindow;
<br> var realHeight = domainA.location.hash.split("#")[1];
<br> //last step: , iframe
<br> parent.parent.resize(realHeight);
<p></p>
<p> //alert("realHeight:"+realHeight);<br> //alert(document.parentWindow.name);// domainA<br> //error://alert(document.parentWindow.parent.name); // : domainB <br> //alert(document.parentWindow.parent.parent.name);// window domainA, <br> }<br> // iframe src , setInterval()<br> //setInterval("invokeMethodInTopWindow()",100);<br>
domanBの のother.
Insert title here
, IFrame , , ,
Javascript input , , 。
, IFrame , , ,
Javascript input , , 。
, IFrame , , ,
Javascript input , , 。
, IFrame , , ,
Javascript input , , 。
, IFrame , , ,
Javascript input , , 。
, IFrame , , ,
Javascript input , , 。
, IFrame , , ,
Javascript input , , 。
, IFrame , , ,
Javascript input , , 。
<br> // div
<br> function btnClick() {
<br> var div = document.getElementsByTagName("div");
<br> for(var i in div) {
<br> if(i<div.length)
<br> div[i].style.display = (div[i].style.display == 'none') ? "block" : "none";
<br> }
<br> }
<br>
<br> function proxy(){
<br> //alert("btn click");
<br> //
<br> var scrollHeight = document.documentElement.scrollHeight;
<br> //alert(" :"+scrollHeight);
<br> // domainA iframe src
<br> var iframeDomainA = document.getElementsByName("domainA")[0];
<br> // domainA , “ ”
<br> var url = "http://localhost:9000/agent";
<br> /** : iframe, iframe , setInterval()*/
<br> iframeDomainA.src = url+ "? time=" + new Date().getTime() + "#" + scrollHeight ;
<br> }
<br>
<br> window.onload = proxy;
<br>
<br>