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> </本文> |
<<: 優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス
推薦する
Raspberry Pi 3B+ に 64 ビット Ubuntu システムと Docker ツールをインストールする詳細な手順
Raspberry Pi 3B に 64 ビット アプリケーション (64 ビット JDK など) ...
html2canvas を使用して HTML コードを画像に変換する方法
コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...
中国のウェブサイトユーザーエクスペリエンスランキング
<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...
HTMLは角丸四角形を簡単に実装します
質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?ソリューション...
MySQL エラー: ロックを取得しようとしたときにデッドロックが見つかりました。トランザクションの解決策を再起動してください
問題を見つける最近、以前のデータを入力していたときに、プログラムが突然次のエラーを報告しました。 [...
MySQL 8.0 でのチェック制約の実装
みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。今回はMySQL 8.0で追...
Vueはカウントダウン機能を実装する
この記事の例では、カウントダウン機能を実装するためのVueの具体的なコードを参考までに共有しています...
Windows 8 での MySQL 5.6.15 のインストールと設定方法のグラフィック チュートリアル
MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...
MySQL で CURRENT_TIMESTAMP を使用する方法
目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...
css input[type=file] スタイルの美化 (入力アップロードファイルスタイル)
効果： <!doctypehtml> <html> <ヘッド> ...
ブラウザでのjsのイベントループイベントキューの詳細な説明
目次序文スタックと2つのキューを理解する実行プロセス簡単な例より難しい例要約する序文以下の内容はブラ...
Vue の vue.$set() メソッドのソースコード例の詳細な説明
Vue を使用してプロジェクトを開発する過程で、次のような問題によく遭遇します。Vue のデータでオ...
フレックスレイアウトとposition:absolute/fixedの競合の詳細な説明
以前、プロジェクトを開発しているときに、flex レイアウトと position:absolute/...
JavaScript の構造化代入の一般的なシナリオと例 5 つ
目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...
Linux の traceroute コマンドの使用方法の詳細な説明
Traceroute を使用すると、情報がコンピュータからインターネットの反対側のホストまでたどるパ...