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> </本文> |
<<: 優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス
推薦する
js キャンバスはスライダー検証を実現します
この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...
JS でページのスクリーンショット機能を実装する方法
「ページのスクリーンショット」は、ページポスターの生成、ポップアップ画像の共有など、フロントエンドで...
Vue でのルーティングパラメータの受け渡しとクロスコンポーネントパラメータの受け渡しの詳細な説明
ルートジャンプ this.$router.push('/course'); this...
MySQL データベースの操作とデータ型
目次1. データベース操作1.1 データベースの表示1.2 データベースを作成する1.3 データベー...
MYSQLは時間（年、月、日）フィールドを変更されていない時間、分、秒に置き換えます。分析例
書き方1： sas_order_supply_month_pay セットを更新 RECEIVE_TI...
VueはSplitを使用して、ユニバーサルドラッグアンドスライドパーティションパネルコンポーネントをカプセル化します。
目次序文始める基本レイアウトデータバインディングイベントバインディング最適化ジッター問題を最適化する...
HTML テーブルに複雑なテーブル ヘッダーを実装するためのサンプル コード
複雑な表を作成するには HTML を使用します。複雑なテーブルでは通常、td の rowspan 属...
jsとcssのブロッキング問題の詳細な分析
目次DOMContentLoadedとロードjs ブロッキングとは何ですか? CSS ブロッキングと...
select @@session.tx_read_only が DB に大量に出現するのはなぜですか?
問題を見つける上位の SQL ステートメントを取得すると、DB が大量のselect @@sessi...
MySQL 5.7.15 のインストールと設定方法のグラフィック チュートリアル (Windows)
MySQL をインストールする必要があるため、インストール手順を以下のように記録します。 自分なり...
MySQLデータファイルの保存場所を表示する方法
次のような疑問が湧くかもしれません。MySQLをローカル (自分のコンピュータ) にインストールした...
MySQL btree インデックスとハッシュ インデックスの違い
MySQL では、ほとんどのインデックス (PRIMARY KEY、UNIQUE、INDEX、FUL...
重複したMySQLレコードを現場でチェックし、処理する実践的な記録
目次序文分析するデータ合計繰り返し率どこにあるかと持っているかの違い要約する序文私はソフトウェアの導...
Vueはスクロールバースタイルを実装します
最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...
JavaScript 配列の include と Reduce の基本的な使用法
目次序文配列.プロトタイプ.includes文法パラメータ戻り値例配列プロトタイプの削減文法パラメー...