HTML再利用のヒント
2022-02-06 16:44:39
HTMLの再利用というのはあまり言われない言葉ですが、今日のまとめは以下の通りです。
古いブラウザでは、HTML文書はネストをサポートしておらず、HTMLコードの再利用の一般的な方法は、サーバーサイドとクライアントサイドの2種類の実装に大別されます。
1. サーバーサイドの実装
a.SSIを使用する、通常のshtmlファイルともに。
b.asp、phpなどのクラスステートメント、テンプレートページ、asp.netのユーザーコントロールなどを含める。
2. クライアント側に実装
a.javascriptクライアントサイドスクリプトを使用する
a1. htmlドキュメントのonloadイベントでjsメソッドを起動し、そのメソッド内でコンテナとしてページ要素を見つけ、そのコンテナにhtmlコードのスニペットを出力することができます(出力するhtmlコードのスニペットを格納する文字列を定義できます、例えば: var str="<p>hello world!</ p>"; ).
a2. ページ内に <script type="text/javascript" src="Default3.aspx"></script> などのスクリプト登録ブロックを使用し(そこにjs形式を実装したスクリプトファイルや他のサーバーサイド出力も可能)、実装したスクリプトファイルで再利用するhtmlコードを document.write メソッドでプリントアウトしています。
a3. AJAXの実装を使用する。この方法には欠点があり、クライアント側の一部のブラウザはデフォルトでajaxのクロスサイトコールをサポートしていないことです。
b.iframeを使用する
両方に対応するオプション
多くの場合、サーバーサイドの実装が好まれますが、静的な実装を行うページや、クライアントサイドの実装が再び使用されるような特別な場合を除けば、サーバーサイドの実装が好まれます。
その他の参考文献はこちら
http://ask-leo.com/how_do_i_include_one_html_file_inside_another.html
古いブラウザでは、HTML文書はネストをサポートしておらず、HTMLコードの再利用の一般的な方法は、サーバーサイドとクライアントサイドの2種類の実装に大別されます。
1. サーバーサイドの実装
a.SSIを使用する、通常のshtmlファイルともに。
b.asp、phpなどのクラスステートメント、テンプレートページ、asp.netのユーザーコントロールなどを含める。
2. クライアント側に実装
a.javascriptクライアントサイドスクリプトを使用する
a1. htmlドキュメントのonloadイベントでjsメソッドを起動し、そのメソッド内でコンテナとしてページ要素を見つけ、そのコンテナにhtmlコードのスニペットを出力することができます(出力するhtmlコードのスニペットを格納する文字列を定義できます、例えば: var str="<p>hello world!</ p>"; ).
a2. ページ内に <script type="text/javascript" src="Default3.aspx"></script> などのスクリプト登録ブロックを使用し(そこにjs形式を実装したスクリプトファイルや他のサーバーサイド出力も可能)、実装したスクリプトファイルで再利用するhtmlコードを document.write メソッドでプリントアウトしています。
a3. AJAXの実装を使用する。この方法には欠点があり、クライアント側の一部のブラウザはデフォルトでajaxのクロスサイトコールをサポートしていないことです。
b.iframeを使用する
両方に対応するオプション
多くの場合、サーバーサイドの実装が好まれますが、静的な実装を行うページや、クライアントサイドの実装が再び使用されるような特別な場合を除けば、サーバーサイドの実装が好まれます。
その他の参考文献はこちら
http://ask-leo.com/how_do_i_include_one_html_file_inside_another.html
http://www.boutell.com/newfaq/creating/include.html
http://blog.csdn.net/omohe/archive/2007/10/28/1850766.aspx
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン