HTML ページを別の page_html/css_WEB-ITnose 内にネストする方法-htmlチュートリアル-php.cn

これは、Web ページを作成するときによく使用され、一部の共通コンテンツをページファイルに集中させることができ、これらのコンテンツを使用する必要がある他のページでは、この共通ファイルをインクルード (参照) するだけで済みます。これにより、Web ページが多数ある場合、共通のコンテンツを変更する必要がある場合、1 つのファイルのみを変更でき、各ファイルを個別に変更する必要がなく、メンテナンスが容易になります。

フッターの著作権情報やその他のコンテンツなどの最も一般的なアプリケーションは、footer.html というファイルに配置でき、他のページファイルはこのファイルをページコンテンツの最後に含めることができます。具体的な例を以下に示します。

HTML ファイルをネストするには、SSI (サーバーサイドインクルード) テクノロジを使用するのが最も簡単な方法です。つまり、2 つのファイルがサーバー側でマージされます。いくつかの無料の Web ホスティングサービスを除いて、ほぼすべての Web ホスティングサーバーが SSI をサポートしています。これも推奨される方法であり、ASP および ASP.NET Web ページで使用される構文とまったく同じです。 Web マスターが PHP または JSP の使用を希望する場合、構文は若干異なります。

SSI、ASP、ASP.NET、PHP、JSP などのサーバー側の動的ページ言語が使用できない状況のために、ここでは 2 つのクライアント側のモザイクメソッド、JavaScript メソッドと iframe メソッドも紹介します。これらのクライアント側の方法には両方とも重大な欠点があるため、通常は推奨されません。

それぞれの方法を以下で詳しく紹介します。

1. SSI (サーバーサイドインクルード)

SSI は単純な動的 Web ページ作成テクノロジですが、一部のサーバーでは、ファイル内の SSI コマンドを認識するために Web ページのファイル拡張子が .shtml である必要があります。 SSI コマンドが機能していないようであれば、まだ諦めずに、ファイル拡張子を .shtml に変更してみてください。機能する可能性があります。サーバーが SSI をサポートしているかどうかがわかっている場合は、別の記事をお読みください。

SSI を使用する場合の制限の 1 つは、効果を確認するためにページを Web サーバーに配置する必要があることです。ローカルでデバッグするのは困難です。もちろん、ローカルでデバッグする必要がある場合は、Apache サーバーをローカルにインストールするだけです。

たとえば、次のような同じ著作権情報を各 Web ページの下部に追加する場合は、

この情報行を footer.html、footer というファイルに入れることができます。 .html 内容は次のとおりです:

footer.html をインクルードするための他のページファイルの SSI コマンドは:

(一般的に使用されます)

または

2 つはほぼ同じですが、その理由は次のとおりです。 include virtual の背後にあるのは、URL の形式でパスを受け取ることです。サーバーが CGI をサポートしている場合は、CGI プログラムを実行してその出力を含めることもできます。インクルードファイルの後にファイルシステムパスが続くため、CGI プログラムは実行できません。どちらも相対パスを受け入れることができるため、上記の単純な例では、両方の効果は同じです。 URL パスとファイルシステムパスの違いがわからない場合は、 include virtual を使用してください

SSI の詳細については、この SSI 紹介記事を参照してください。

2. PHP

サーバーが PHP をサポートしている場合、PHP を使用して footer.html ファイルを参照する方法は次のとおりです。

この文コマンドのファイル拡張子は.phpである必要があります。

このサーバー上のファイルを参照するだけでなく、PHP の include コマンドを使用して、次のような他の Web サイト上の HTML ファイルを参照することもできます。

もちろん、他の人のファイルを引用するには許可が必要です。

3. ASP と ASP.NET

古い ASP を使用している場合は、コマンドが配置されているファイルの拡張子をに変更するだけで済みます。アスプ。

ASP.NET の場合も同様です。違いは、ASP コマンドが実行される前に SSI コマンドがコンパイルされるため、ファイル名に ASP.NET 変数を使用できないことです。これを使用する必要がある場合は、ASP.NET コマンドを使用してファイルをネストします。

例:

<%          Response.WriteFile ("footer.html")%>

ログイン後にコピー

ASP.NET で動的ファイルのネストを実装する方法の詳細については、Microsoft のこの記事を参照してください。

4. JSP (Java サーバーページ)

JSP ファイルは、Apache Tomcat などの Java ベースのサーバーで実行する必要があります。 JSP インクルードファイルの構文は次のとおりです:
<%@ include file="footer.html" %>

5. クライアント側のインクルード

クライアント側の長所と短所インクルード

クライアントをインクルードするには、JavaScript と iframe の 2 つの方法があります。まず、両方の方法の長所と短所を見てみましょう。

2 つの方法のうち、JavaScript によって生成されたページ形式の方が優れており、JavaScript は URL からページのフラグメントを取得して、それを別のページの任意の場所に埋め込むことができます。結果は基本的にサーバー側に含まれる結果と同じですが、欠点はクライアントで Javascript 機能を有効にする必要があることです (現在、ほとんどの人が有効にすることを選択していますが、セキュリティ上の理由から有効にしていない人もいます)。もう 1 つの欠点は、検索エンジンが Javascript に含まれるページのコンテンツを認識できないことです。これは、Web サイトのプロモーションに悪影響を及ぼします。

iframe の使用は、オブジェクトコントロールを使用して Flash ムービー、ビデオ、または MP3 プレーヤーをページに埋め込むのと同様に、HTML ページを別のページに強制的に埋め込むことができます。 iframe を使用する場合、クライアントは Javascript 機能を有効にする必要はありません。欠点は、iframe の高さと幅が固定されており、埋め込まれているページのサイズによって変更できないことです。埋め込まれたページが指定された高さと幅よりも大きい場合、スクロールバーが表示されます (もちろん、scrolling = "no" を使用してスクロールバーを強制的に非表示にすることもできますが、ページのコンテンツは不完全に表示されます)。、ページの外観に影響します。さらに、検索エンジンには iframe によって参照されるページが含まれない場合があり、これは Web サイトのプロモーションに役立ちません。

5.2 JavaScript を使用するクライアントには

が含まれます

この方法は主に Firefox ブラウザ (任意のオペレーティングシステム)、IE5 以降 (Windows)、Apple の Safari ブラウザ (MacOS X) に適用でき、XMLHTTP API テクノロジと呼ばれるツールを使用できます。 Javascript プログラムを通じて XML ファイルを動的に読み取ります。このメソッドは、HTML ファイルを読み取り、現在の Web ページファイルの指定された場所に配置するためにも使用できます。

プロのウェブサイトデザイナー: これは使用しないでください。 場合によっては、Web ページのネストを実現するために JavaScript を使用する必要があるかもしれませんが、これは単なる回り道です。サーバーが上記のサーバー側ネスト方法をサポートできる場合、特に専門家は、この方法の使用をできる限り避けるべきです。作成した Web コンテンツが Google で検索できない、または Google で検索できないと顧客が苦情を言う可能性があるためです。 Google。一部のブラウザでは正常に表示されます。

この方法で作成されたWebページは、Firefox、Safari、IE5以降のブラウザでのみ正常に表示できることに注意してください。ほとんどの人がこれらのブラウザを使用していますが、全員が使用しているわけではなく、一部のユーザーはセキュリティ上の理由から Javascript 機能をオフにしています。

重要な注意事項: サーバー上で閲覧するのではなく、ローカルコンピューター上で Web ページをデバッグしている場合、最新バージョンの IE ブラウザーでは、JavaScript の動的に生成された部分が自動的にブロックされ、警告メッセージが表示されます。動的表示を許可する「コンテンツ」Web ページを正常に表示できます。これらの Web ページファイルをサーバーに配置すると、IE はホームページと含まれる Web ページコンテンツが同じサーバーからのものであると認識するため、この問題は自動的に解消されます。

さて、話はこれくらいにして、その方法を説明します。次のコードを Web ページのに配置します:

注意すべき点は、関数 clientSideInclude はページが完全にロードされた後でのみ機能するため、この関数をタグの onload イベントで呼び出す必要があることです。イベントがトリガーされるこの時点までに、ブラウザはページ内のすべての HTML を完全に解析している必要があります。

具体的なコードは次のとおりです:

別のページを挿入する必要がある場所を記述します:

ページの先頭にタグを記述します:

5.3 iframe を使用したクライアント側の組み込み

クライアントページのネストでは、iframe メソッドも使用できます。欠点は、ネストされたページがホームページ上でどのくらいの位置を占めるかを事前に決定する必要があることです。ネストされたページが大きすぎて、事前に定義された幅または高さを超えると、ホームページがスクロールします。これはまさに必要なものかもしれませんが、ホームページのデザインを完全に壊す可能性があります

iframe の使用は簡単です。次の例では、include.html という別のページをページに埋め込みます。 .html" width="450" height="400" >

お使いのブラウザは iframe ページのネストをサポートしていません。ページコンテンツにアクセスするには、ここをクリックしてください。 < /a>

ここに挿入されるページは、高さ 400 ピクセル、幅 450 ピクセルを定義します

なぜ通常のハイパーリンク要素を挿入する必要があるのでしょうか? a>? これは、古いバージョンのブラウザと検索エンジンが iframe をサポートしていないためです。Netscape 4 などの古いブラウザを使用している人はほとんどいませんが、Google などの検索エンジンはほとんどすべての検索エンジンで iframe を見つけやすくなります。 Web ページのコンテンツ

さらに、最も一般的に使用される幅 (幅) と高さ (高さ)、いかなる状況でもスクロールバーを表示したくない場合は、iframe のスクロール属性を「no」に等しく定義できます。モザイクページの周囲に境界線を表示したくない場合は、frameborder プロパティを 0 に設定できます。次の例は、スクロール属性とフレームボーダー属性の使用法を示しています。 < a href="include.html">お使いのブラウザは iframe ページのネストをサポートしていません。ページコンテンツにアクセスするには、ここをクリックしてください。