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> </本文> |
<<: 優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス
推薦する
Docker バインディング固定 IP/クロスホストコンテナ相互アクセス操作
序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...
MySQL で乱数を生成し、文字列を連結する方法の例
この記事では、MySQL が乱数を生成し、文字列を連結する方法について例を使用して説明します。ご参考...
LinuxにDockerをインストールする（非常に簡単なインストール方法）
最近、かなり暇です。大学4年生として数か月間インターンをしていました。インターンとして、Docker...
fileReader 使用時の落とし穴と解決策
目次fileReader に関する落とし穴iOS における FileReader の落とし穴 (イメ...
vuex での mapState の考え方の応用
目次1. マップ方式2. 応用背景：需要開発プロセス中に、一部のインターフェースは、ページに表示する...
HTML マーキータグの使用例
このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルのみをサポートしています。そのため、...
無料のパブリック STUN サーバー
無料のパブリック STUN サーバーSIP 端末がプライベート IP アドレスを使用する場合、スタン...
React HTML で react を使用する 2 つの方法
基本的な使い方 <!DOCTYPE html> <html lang="...
HTMLからReactを実装する方法を教えます
ReactとはReact は、効率的で高速なユーザー インターフェイスを構築するためのシンプルな J...
Windows Server 2016 リモート デスクトップ サービスの構成とライセンスのアクティブ化 (2 ユーザー)
Server 2016 のリモート デスクトップ接続のデフォルト数は 2 ユーザーです。2 人以上...
MySQL でのバイナリ型操作
この記事は主にMySQLデータベースのバイナリ型操作を紹介し、具体的な内容を通して紹介します。MyS...
Windows に MySQL 5.7.18 の解凍バージョンをインストールするチュートリアル
1. インストールプロセスMySQL バージョン: 5.7.18 1. my.ini ファイル（簡易...
Windows10のマウスを模倣して境界線を光らせる効果を実現するCSSの詳細解説
最新の Windows 10 アップデートをインストールした後、システム UI の詳細な効果が顕著に...
Ubuntu 18.04の下のディレクトリにディスクをマウントします
導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...
実用的なクイックスタートReactルーティング開発
インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...