iframe 適応サイズ実装コード

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”
}
</スクリプト>
<!--js は b.html の幅と高さを読み取り、読み取った幅と高さを a.html と同じドメインにある中間プロキシ ページである c.html の src のハッシュに設定します -->
<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 を暗号化および復号化するいくつかの方法 (要約)

推薦する

JavaScript 関数をよりエレガントにする方法

目次分割代入を使用したオブジェクトパラメータコールバック関数の命名条件文を説明的にするスイッチ文をM...

Nginx 転送ソケットポート設定の詳細な説明

Nginx によるソケット ポート転送の一般的なシナリオ: オンライン学習アプリケーションでは、通常...

MySQLコンテナ間のレプリケーション構成例の詳細な説明

背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...

CSS background-blend-modeの仕組みを深く理解する

この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してくださ...

ミニマルなウェブサイトデザインの例

Web アプリケーション クラス1. みんなのためにダウンまたは私だけのためにこのウェブサイトは、ウ...

Webpack4プラグインの実装原理についての簡単な説明

目次序文知る練習すれば完璧になる序文wabpack では、ローダーの他にプラグインがコア機能です。プ...

VS2022 リモート デバッグ ツールの使い方

WeChat 関連サービスをデバッグする場合など、職場のサーバー環境でリモートデバッグを行う必要があ...

CocosCreator Typescriptでテトリスゲームを作る

目次1. はじめに2. 解決すべきいくつかの重要な問題3.最後に書く1. はじめに最近、Cocos ...

Jenkins+Docker継続的インテグレーションの実装

目次1. Jenkinsの紹介2. Jenkinsをインストールしてデプロイする1. 環境情報2. ...

JavaScriptの基礎を学ぶ

目次1. JavaScriptを記述する場所2. JavaScriptでよく使われる入力文と出力文1...

mysql 一時テーブルの使用状況の分析 [クエリ結果は一時テーブルに保存できます]

この記事では、例を使用して MySQL 一時テーブルの使用方法を説明します。ご参考までに、詳細は以下...

nginxでの共有メモリの使用に関する詳細な説明

nginx プロセス モデルでは、トラフィック統計、トラフィック制御、データ共有などのタスクを完了す...

MySQL テーブル分割後にスムーズにオンラインになる方法

目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...

Ubuntu20のtzselect設定時間失敗問題、Raspberry Piサーバ(推奨)

2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...