ページドメインの関係: メインページ 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 を暗号化および復号化するいくつかの方法 (要約)
目次アプリ.vueサブ1.vueサブ2.vue要約する vue2 における非親子コンポーネントの値の...
概要前の章では、クエリのフィルター条件について学習しました。MySQL では、like % ワイルド...
レンダリングBlog Gardenでよく使われるスタイル /*タイトル h1 h2 h3 スタイル*...
概要: HBase には、ユーザーに管理、分析、修復、デバッグ機能を提供するための多くの操作および保...
1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...
目次1. はじめに2. バックアップとリカバリの簡単な定義3. 復旧計画で考慮すべきいくつかの要素4...
ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...
目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...
CSS の位置属性は要素の配置タイプを指定し、上、下、左、右を使用して要素を具体的に配置します...
MySQLデーモンの起動に失敗したエラーの解決方法数日前、公開されたウェブサイトはこれらのアクティビ...
目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...
コードをコピーコードは次のとおりです。 <html> <ヘッド> <t...
1. Webデザイナーウォール 2. Veerleのブログ 3. チュートリアル9 4. UXブース...
TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...
1. Dockerの起動の問題:問題は解決しました: Hyper-V をオンにする必要があります (...