ページドメインの関係: メインページ 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 クロスドメイン操作の問題もこの方法で解決できます。 |
>>: MySQL を暗号化および復号化するいくつかの方法 (要約)
目次分割代入を使用したオブジェクトパラメータコールバック関数の命名条件文を説明的にするスイッチ文をM...
Nginx によるソケット ポート転送の一般的なシナリオ: オンライン学習アプリケーションでは、通常...
背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...
社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...
この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してくださ...
Web アプリケーション クラス1. みんなのためにダウンまたは私だけのためにこのウェブサイトは、ウ...
目次序文知る練習すれば完璧になる序文wabpack では、ローダーの他にプラグインがコア機能です。プ...
WeChat 関連サービスをデバッグする場合など、職場のサーバー環境でリモートデバッグを行う必要があ...
目次1. はじめに2. 解決すべきいくつかの重要な問題3.最後に書く1. はじめに最近、Cocos ...
目次1. Jenkinsの紹介2. Jenkinsをインストールしてデプロイする1. 環境情報2. ...
目次1. JavaScriptを記述する場所2. JavaScriptでよく使われる入力文と出力文1...
この記事では、例を使用して MySQL 一時テーブルの使用方法を説明します。ご参考までに、詳細は以下...
nginx プロセス モデルでは、トラフィック統計、トラフィック制御、データ共有などのタスクを完了す...
目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...
2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...