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 で Websocket ベースのマルチターミナル ブリッジング プラットフォームを実装する方法
目次1. デバッグ対象2. WebSocketの機能3. ソケット接続を確立する3.1 部屋の作成方...
Vue が Bibibili のホームページを模倣する際の問題
エンジニアリング構造プロジェクトは2つの部分に分かれています。bilibili-apiはAPIインタ...
Vueのwatch、computed、methodsの違いのまとめ
目次1 はじめに2 基本的な使い方2.1 方法2.2 計算プロパティ2.3 リスナーを見る3 3つの...
MySQL マスタースレーブレプリケーションの原理と注意点
前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...
UbuntuはSSHサービスのリモートログイン操作を開始します
ssh-secure シェルは、安全なリモート ログインを提供します。組み込みシステムを開発し、Li...
MySQL でよく使用されるデータベースとテーブル シャーディング ソリューションの概要
目次1. データベースのボトルネック2. サブライブラリとサブテーブル2. 横長テーブル3. 垂直サ...
jQueryはショッピングカートの完全な機能を実現します
この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...
Ubuntu 18.04 (物理マシン) で OpenWRT 開発環境を構成する方法
1. 仮想マシン（物理マシン）をインストールする仮想マシンまたは物理マシンにインストールできます。 ...
CSSマウスを画像の上に置いたときにマスクレイヤー効果を追加する実装
まず効果を見てみましょう: マウスを画像の上に移動すると、影の効果とテキスト/アイコンが追加されます...
初心者のためのウェブサイト構築入門 - ウェブサイト構築に必要な条件とツール
今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...
MySQL の CPU 負荷が高い問題のトラブルシューティング
MySQL による CPU 負荷の上昇今日の午後、MySQL によってサーバーの負荷が高くなる問題を...
MySQL5.7+ MySQL Workbenchのインストールと設定方法のグラフィックチュートリアル（MAC）
この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...
SQL と NoSQL の違いのまとめ
主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...
Linux でファイル権限を変更する chmod コマンドの詳細な分析
Linux chmodコマンドを使用して、ターゲット ファイルにアクセス、読み取り、書き込み、または...
パスワードログインなしのLinux構成スタンドアロンおよびフルディストリビューションの詳細なチュートリアル
目次1: 単一マシンのパスワードフリーログイン構成1. 仮想マシンのホスト名を設定する2. 仮想マシ...