iframe 適応サイズ実装コード

ページドメインの関係:

メインページ a.html はドメイン A: www.jb51.net に属します。
iframe ページ b.html はドメイン B: www.jb51.cn に属しており、アドレスは http://www.jb51.cn/b.html であると仮定します。

結果：

ドメイン名 A のページ a.html は、iframe を介してドメイン名 B のページ b.html を埋め込んでいます。b.html の幅と高さは予測できず、変更されるため、a.html の iframe はサイズに適応する必要があります。

問題の性質:

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

解決：

同じドメイン A に属するプロキシページ c.html と a.html を紹介します。c.html はドメイン A が提供する中間プロキシページです。c.html のアドレスは www.jb51.net/c.html であると仮定します。location.hash の幅と高さの値を読み取り、同じドメインの a.html の iframe の幅と高さを設定する役割を担います。

コードは次のとおりです。

.html コード

まず、a.htmlはiframeを通じてb.htmlを導入します。
<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.jb51.cn/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe>

b.html コード

コードをコピー

コードは次のとおりです。

<スクリプトタイプ=”テキスト/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; //https://www.jb51.net/c.html#width|height”
}
</スクリプト>

<iframe id=”c_iframe” 高さ=”0″ 幅=”0″ src=”https://www.jb51.net/c.html” スタイル=”display:none” ></iframe>

c.html コード

コードをコピー

コードは次のとおりです。

<スクリプトタイプ=”テキスト/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 = ハッシュ高さ;
</スクリプト>

a.html 内の iframe は、b.html の幅と高さに適応できます。

他の同様の js クロスドメイン操作の問題もこの方法で解決できます。

<<: 1分でVueが右クリックメニューを実装

>>: MySQL を暗号化および復号化するいくつかの方法 (要約)