複数のページで同じ HTML フラグメント コードを使用する_JavaScript のヒント

問題の説明
比較的複雑な HTML フラグメント (A) が他のページ (B、C、D...) に埋め込まれている場合。
問題の鍵は、HTML フラグメント内で処理する必要のある JavaScript ロジック (ページング、クリック イベント応答など) が多数存在することです。

この問題については、簡単な例を使用して説明します。
「ページ上にボタンがあります。HTML フラグメントを導入するには、このボタンをクリックしてください。この HTML フラグメントにはページング ボタンがあります。」

1. IFrame を使用します
メイン ページで、ボタンをクリックしてページに IFrame を導入します:

コードをコピー コードは次のとおりです:

< ;div id="complex_page_segment">


>


2. AJAX はページ フラグメントを返し、イベントを登録します。
注: 返された HTML フラグメントをシミュレートするために textarea を使用します。




コードをコピー


コードは次のとおりです:

&gて;

<br> <div id="complex_page_segment"> <br> <input type="button" value="前のページ" class="previous"><br> <input type="button" value="次のページ" class="next"><br> <div class="content">ページ コンテンツ</div> <br> </div> <br>

複数のページで同じ HTML セグメントを参照する必要があるため、この方法では大量の事態を処理するための重複性のあるコストがかかり、明显パブリックなメソッドを削除する必要があります。

3. AJAX は、面のセグメントを返します。面のセグメント内の関数注釈イベント

复制代 代次のように:

ページ コンテンツ

さらに、この関数を手動で使用する必要はなく、返された HTML セグメント内で自動的に実行することもできます。

4. AJAX はイベント自動応答の页面片セグメントを返します

复制代码 代码如下:

<br> <script type="text/javascript"><BR> $(function() {<BR> varparent = $("#complex_page_segment");<BR> $( ".previous",parent).click(function() {<BR> $(".content",parent).html("前のページのコンテンツ");<BR> });<BR> $(".next ",parent).click(function() {<BR> $(".content",parent).html("次のページのコンテンツ");<BR> });<BR> });<BR> < /script><BR> <div id="complex_page_segment"><BR> <input type="button" value="前のページ" class="previous" /><BR> <input type=" button" value="次のページ" class="next" /><BR> <div class="content">ページ コンテンツ</script>

> ;

最後の方法と最初の IFrame の方法は、私たちが推奨したものです。