IFRAME適応サイズ

ドメインa.htmlはメインページに属しますa：www.taobao.com

Iframed Page B.htmlが属するドメインB：www.alimama.com、想定アドレス：http://www.alimama.com/b.html

Aドメイン名A.HTMLの下のページは、iFrameを介してBドメイン名Bの下にあるページB.HTMLに埋め込まれています。 B.HTMLの幅と高さは予測不可能であり、変化するため、A.HTMLのIFRAMEの適応サイズが必要です。

JSのクロスドメインIFRAMEアクセスの問題。A.HTMLのIFRAMEの高さと幅を制御するには、最初にB.HTMLのサイズを読む必要があります。 AとBは同じドメインに属していません。セキュリティ上の理由から、ブラウザはJSへのクロスドメインアクセスを制限し、B.HTMLの高さと幅を読み取ることができません。

プロキシプロキシページC.HTMLは、同じドメインAとA.HTMLに属します。 C.HTMLは、Aドメインaの下で提供される中間プロキシページです。 c.htmlのアドレスは、www.taobao.com/c.htmlであると仮定します。これは、location.hashの幅と高さの値を読み取り、A.htmlのiframeの幅と高さを同じドメインと同じドメインの下に設定する責任があります。

A.HTMLコード

最初に、B.HTMLはA.HTMLでIFRAMEを通じて導入されました

<iframe id = b_iframe height = 0 'width = 0' src = http：//www.alimama.com/b.html frameborder = no border = 0px marginwidth = 0 'marginheight = 0'スクローリング= no loadtransparency = yes> </iframe> </iframe> <

b.htmlコード

<script type = text/javascript>

var b_width = math.max（document.documentelement.clientwidth、document.body.clientwidth）;

var b_height = math.max（document.documentelement.clientheight、document.body.clientheight）;

var c_iframe = document.getElementById（c_iframe）;

c_iframe.src = c_iframe.src+＃+b_width+|+b_height; //http://www.taobao.com/c.html#width|height

}

</script>

<！ - jsはb.htmlの幅と高さを読み取り、同じドメインでc.htmlの中央プロキシページに読み取りの幅と高さを設定し、c.html->のsrcのハッシュの幅と高さを設定します。

<iframe id = c_iframe height = 0 'width = 0′ src = http：//www.taobao.com/c.html style = display：none> </iframe>

C.HTMLコード

<script type = text/javascript>

var b_iframe = parent.parent.document.getelementbyid（b_iframe）;

var hash_url = window.location.hash;

var hash_width = hash_url.split（＃）[1] .split（|）[0]+px;

var hash_height = hash_url.split（＃）[1] .split（|）[1]+px;

b_iframe.style.width = hash_width;

b_iframe.style.height = hash_height;

</script>

A.HTMLのIFRAMEは、b.htmlの幅と高さに適応できます。

JSに類似した他のクロスドメイン操作の問題も、このアイデアに従って解決することができます