ページドメイン関係:
メイン ページ a.html はドメイン A: www.taabao.com に属します。
iframe ページ b.html はドメイン B: www.alimama.com に属し、アドレス: http://www.alimama.com/b.html と仮定します。
実現効果：
A ドメイン名のページ a.html は、iframe を介して B ドメイン名のページ b.html に埋め込まれます。b.html の幅と高さは予測できず、変更される可能性があるため、a.html の iframe は次のようにする必要があります。適応的にサイズ調整されます。
問題の性質:
js には、クロスドメイン iframe アクセスに関する問題があります。a.html の iframe の高さと幅を制御するには、最初に A と B のサイズが同じドメインに属していないことを読み取る必要があるからです。セキュリティ上の理由から、ブラウザは js を使用してクロスドメイン アクセスを制限しており、b.html の高さと幅を読み取ることはできません。
解決：
プロキシ ページの導入 c.html と a.html は同じドメイン A に属します。c.html はドメイン A で提供される優れた中間プロキシ ページです。c.html のアドレスは www.taabao.com/c.html であると仮定します。これは、location.hash の幅と高さの値を取得し、それと同じドメイン内の a.html で iframe の幅と高さを設定する読み取りを担当します。
コードは次のとおりです。
a.htmlコード
まず、a.html に iframe を介して b.html が導入されます。
<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.alimama.com/b.html” Frameborder=”no” border=”0px” marginwidth=”0″ marginheight =”0″ スクロール=”いいえ” allowedtransparency=”はい” ></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”
}
</script>
<!–js は b.html の幅と高さを読み取り、読み取った幅と高さを a.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 = ハッシュ幅;
b_iframe.style.height = ハッシュ高さ;
</script>
a.html の iframe は、b.html の幅と高さに適合させることができます。
他の同様の JS クロスドメイン操作の問題も、この考え方に従って解決できます。
原文： http://ued.alimama.com/? p=197