iframe の多層ネスト、無制限のネスト、高度に適応したソリューション
|
ページ A、B、C の 3 つがあります。ページ A にはページ B が含まれ、ページ B にはページ C が含まれます。ページ A はページ B に適応し、ページ C はページ B に適応します。 Aページ コードをコピー コードは次のとおりです。<本文> <iframe id="main" name="main" width="980" scrolling="no" frameborder="0" src="ページ B" onload="this.height=main.document.body.scrollHeight;this.width=main.document.body.scrollWidth;if(this.height < 410){this.height=410;}"> </iframe> </本文> ページB コードをコピー コードは次のとおりです。<本文> <!--左--> <div style="flost:left;"> 左メニュー </div> <!--右--> <div style="flost:right;"> <iframe id="testIframe" name="testIframe" frameborder=0 style="width: 680px;" scrolling="no" src="C ページ"></iframe> </div> </本文> ページ C は、最下位ページ (つまり、一番下のページ) に次の JS 関数を書き込み、body の onload イベントでメソッドを呼び出します [次の式はユニバーサル式です] コードをコピー コードは次のとおりです。<script type="text/javascript"> //すべての親ページの Iframe が、含まれるページの高さに自動的に適応するように、Iframe を自動的に拡張します。 関数autoHeight(){ var doc = ドキュメント、 p = ウィンドウ; while(p = p.parent){ var フレーム = p.frames、 フレーム、 私 = 0; while(frame = frames[i++]){ フレームドキュメントがdocの場合 frame.frameElement.style.height = doc.body.scrollHeight + 'px'; // Firefox では 'px' を追加する必要があることに注意してください。そうしないと Firefox では無効になります。 doc = p.document; 壊す; } } if(p == top){ 壊す; } } } </スクリプト> <body onload="autoHeight();"> <!-- テスト後、このサブページの本体には高さのある div が必要です。そうでない場合は、上記の適応が有効になります --> <div style="height: 1px;"> </div> <div style="padding-bottom: 10px;"> <!--この文も重要です--> ここに実際のコンテンツを記述し、divのpadding-bottomの値を設定できます。 </div> </本文> |
<<: 優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス
推薦する
MySQL 8.0.17 のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 8.0.17のインストールと設定方法を参考までに紹介します。具体的な内容は...
CSS属性のデフォルト値width: autoとwidth: 100%の違いの詳細な説明
幅: 自動子要素（コンテンツ+パディング+境界線+余白を含む）は、親要素のコンテンツ領域全体を埋めま...
MySQLの実行プロセスとシーケンスについての簡単な説明
目次1:mysql実行プロセス1.1: コネクタ1.2: キャッシュ1.3: アナライザー1.4: ...
Dockerとiptablesとブリッジモードのネットワーク分離と通信操作の実装
Docker は、ブリッジ、ホスト、オーバーレイなどの複数のネットワークを提供します。同じ Dock...
React Native APPのアップデートに関する簡単な説明
目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...
Windows 10 での MySQL 8.0 のダウンロードとインストール構成のグラフィック チュートリアル
この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...
JavaがMySQL 8.0に接続できない問題の解決策
この記事では、参考までにMySQL 8.0に接続できないJavaの問題をまとめて紹介します。具体的な...
MySQL 5.7.18 のダウンロードとインストールの詳細な手順
MySql ダウンロード1. 公式サイトを開き、ダウンロード パスを見つけます。ダウンロード アドレ...
HTML でさまざまなスペースの特徴と表現を探る (推奨)
I. 概要HTML テンプレートを作成するときに、テキスト レイアウトの手段としてスペースが使用さ...
HTML で div+CSS を使用してシンプルな矢印アイコンを実装するコード
ウェブデザインでは、ウェブページを美しく見せるために矢印を装飾としてよく使用します。現在、多くのウェ...
データベース内のSQL整合性制約ステートメントの分析
整合性制約整合性制約はテーブル データの正確性を保つためのものです。データが正しくない場合は、そもそ...
CSS カウンターとコンテンツの概要
コンテンツ プロパティは CSS 2.1 で導入され、:before および :after 疑似要素...
nginxを使用してドメイン名ベースの仮想ホストを構成する
1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...
MySQL マスタースレーブレプリケーションの実践の詳細説明 - GTID ベースのレプリケーション
GTIDベースのレプリケーション導入GTID ベースのレプリケーションは、MySQL 5.6 以降に...
Dockerを使用してGitlabを素早くデプロイする方法
1. GitLabイメージをダウンロードする docker pull gitlab/gitlab-c...