iframeアダプティブサイズ実装コード
2022-02-04 16:35:40
ページフィールドの関係。
メインページ a.html はドメイン A に属しています: www.jb51.net
iframeのページb.htmlはドメインBに属します: www.jb51.cn,假设地址: http://www.jb51.cn/b.html
効果を実装した。
b.htmlの幅と高さは予測不可能で変化するので、a.htmlのiframeはページのサイズに合わせる必要があります。
問題の本質
クロスドメインiframeにjsのアクセスの問題は、高さと幅を制御するためにiframeのa.htmlで我々は最初のb.htmlのサイズを読み取る必要がありますので、AとBは、同じドメインに属していない、セキュリティ上の理由から、ブラウザのでjsクロスドメインのアクセスは、高さと幅b.htmlのを読むことができない制限されます。
解決策
プロキシ代行ページc.htmlはa.htmlと同じドメインAに属していることを紹介する。c.htmlはドメインAの下で提供される良い中間プロキシページである。c.htmlのアドレスがwww.jb51.net/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a だとする。htmlの中のiframeの幅と高さ。
コードは以下の通りです。
a.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& gt;
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; //https://www.jb51.net/c.html# width|height"
}
</script>
<! -js は b.html の幅と高さを読み込み、読み込んだ幅と高さを a.html と同じドメインの中間プロキシページ car c.html の src のハッシュに設定します->
<iframe id="c_iframe" height="0″ width="0″ src"https://www.jb51.net/c. html" style="display:none" ></iframe>.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX;
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のクロスドメイン操作の問題は、次のような方法で解決することができます。
メインページ a.html はドメイン A に属しています: www.jb51.net
iframeのページb.htmlはドメインBに属します: www.jb51.cn,假设地址: http://www.jb51.cn/b.html
効果を実装した。
b.htmlの幅と高さは予測不可能で変化するので、a.htmlのiframeはページのサイズに合わせる必要があります。
問題の本質
クロスドメインiframeにjsのアクセスの問題は、高さと幅を制御するためにiframeのa.htmlで我々は最初のb.htmlのサイズを読み取る必要がありますので、AとBは、同じドメインに属していない、セキュリティ上の理由から、ブラウザのでjsクロスドメインのアクセスは、高さと幅b.htmlのを読むことができない制限されます。
解決策
プロキシ代行ページc.htmlはa.htmlと同じドメインAに属していることを紹介する。c.htmlはドメインAの下で提供される良い中間プロキシページである。c.htmlのアドレスがwww.jb51.net/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a だとする。htmlの中のiframeの幅と高さ。
コードは以下の通りです。
a.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& gt;
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; //https://www.jb51.net/c.html# width|height"
}
</script>
<! -js は b.html の幅と高さを読み込み、読み込んだ幅と高さを a.html と同じドメインの中間プロキシページ car c.html の src のハッシュに設定します->
<iframe id="c_iframe" height="0″ width="0″ src"https://www.jb51.net/c. html" style="display:none" ></iframe>.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX.XXX;
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のクロスドメイン操作の問題は、次のような方法で解決することができます。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン