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> </本文> |
<<: 優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス
推薦する
Linux でユーザーにルート権限を追加する方法の概要
1. ユーザーを追加します。まず、adduser コマンドを使用して共通ユーザーを追加します。コマン...
JS 矢印関数に適さないシナリオは何ですか?
目次概要オブジェクトにメソッドを定義するオブジェクトリテラルオブジェクトプロトタイプ動的コンテキスト...
Reactでpropsを使用する方法と制限する方法
コンポーネントの props (props はオブジェクトです)機能: コンポーネントに渡されたデー...
JS で if 判定をスムーズに行う方法
目次序文コードの実装アイデア 1アイデア2要約する参照ドキュメント序文プロジェクト内の小さな要件ポイ...
CentOS/RHEL システムで VLAN タグ付きイーサネット カードを使用する方法
シナリオによっては、Linux サーバー (CentOS/RHEL) の同じイーサネット カード (...
MySQL グループ化クエリと集計関数
概要私たちは、双十一に天猫で化粧品を購入する人の平均支出額を知りたい（商品の価格帯を見つけるのに役立...
Vuexはシンプルなショッピングカートを実装します
この記事では、参考までに、Vuex の具体的なコードを共有して、簡単なショッピングカートを実装します...
CentOS 8 / RHEL 8 に VirtualBox 6.0 をインストールするための詳細なチュートリアル
VirtualBox は、技術者が異なる種類の複数の仮想マシン (VM) を同時に実行できるようにす...
Vueでスケルトンスクリーンを実装する例
目次スケルトンスクリーンの使用Vueアーキテクチャスケルトンスクリーンアイデアの概要抽象コンポーネン...
インタラクティブな視覚化 JS ライブラリ gojs の使い方の紹介とヒント
目次1. gojsの紹介2. Gojsのアプリケーションシナリオ3. gojs を選ぶ理由: 4. ...
ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント
<br />ウェブサイトのアクセス速度はウェブサイトのトラフィックに直接影響を及ぼし、ウ...
圧縮パッケージを使用して Linux 環境に JDK 13 をインストールする方法
JDK とは何ですか?まあ、この質問がわからないのであれば、なぜこれをインストールするのか本当にわか...
Node.js で Bash スクリプトを書くための究極のソリューション
目次序文zxライブラリ$`コマンド` CD（）フェッチ（）質問（）寝る（）スローしない()チョークフ...
Nginx の書き換え正規マッチング書き換え方法の例
Nginx の書き換え機能は、リダイレクトと同様に、URL アドレスを一時的または永続的に新しい場所...
RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析
Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...