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 を暗号化および復号化するいくつかの方法 (要約)

推薦する

Vue3 における非親子コンポーネントの値転送の詳細な説明

目次アプリ.vueサブ1.vueサブ2.vue要約する vue2 における非親子コンポーネントの値の...

MySQL 完全折りたたみクエリ正規マッチングの詳細な説明

概要前の章では、クエリのフィルター条件について学習しました。MySQL では、like % ワイルド...

見栄えの良い CSS カスタム スタイル (タイトル h1 h2 h3)

レンダリングBlog Gardenでよく使われるスタイル /*タイトル h1 h2 h3 スタイル*...

一般的な HBase 運用および保守ツール 10 個の概要

概要: HBase には、ユーザーに管理、分析、修復、デバッグ機能を提供するための多くの操作および保...

古い Vue プロジェクトに Vite サポートを追加する方法

1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...

MySQLのバックアップとリカバリの簡単な分析

目次1. はじめに2. バックアップとリカバリの簡単な定義3. 復旧計画で考慮すべきいくつかの要素4...

Link と @import の違いを詳しく見る

ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...

Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します

目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...

CSS の position 属性の値に関する研究 (概要)

CSS の位​​置属性は要素の配置タイプを指定し、上、下、左、右を使用して要素を具体的に配置します...

MySQLデーモンの起動に失敗したエラーの解決方法

MySQLデーモンの起動に失敗したエラーの解決方法数日前、公開されたウェブサイトはこれらのアクティビ...

Bootstrap Webページレイアウトグリッドの実装

目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...

HTML フォームとフォーム内部タグの使用

コードをコピーコードは次のとおりです。 <html> <ヘッド> <t...

有名なブログの再設計例 28 件

1. Webデザイナーウォール 2. Veerleのブログ 3. チュートリアル9 4. UXブース...

TypeScript でオブジェクト キーの値の範囲を制限する方法

TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...

DockerとVMwareの競合を解決する

1. Dockerの起動の問題:問題は解決しました: Hyper-V をオンにする必要があります (...