在多個頁面使用同一個HTML片段的代碼

更新時間：2011年03月04日 00:36:55 作者：

有一個比較復雜的HTML片段(A)，如果把這個HTML片段嵌入到其他頁面中（B,C,D....）。問題的關鍵是在HTML片段中有大量的JavaScript邏輯需要處理，比如說分頁，點擊事件響應等。

問題描述
有一個比較復雜的HTML片段(A)，如果把這個HTML片段嵌入到其他頁面中（B,C,D....）。
問題的關鍵是在HTML片段中有大量的JavaScript邏輯需要處理，比如說分頁，點擊事件響應等。

對于這個問題，我們用一個簡單的例子來說明：
“頁面上有一個按鈕，點擊此按鈕引入一個HTML片段，此HTML片段中有分頁按鈕?！?

1. 使用IFrame
主頁面，點擊一個按鈕向頁面引入一個IFrame：

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html('<iframe src="iframe.htm"></iframe>');
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    IFrame頁面，模擬分頁的情況： 
    <script type="text/javascript">
        $(function() {
            var parent = $("#complex_page_segment");
            $(".previous", parent).click(function() {
                $(".content", parent).html("Previous Page Content");
            });
            $(".next", parent).click(function() {
                $(".content", parent).html("Next Page Content");
            });
        });
    </script>
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">
            Page Content</div>
    </div>

2. AJAX返回頁面片段，并注冊事件
注：我們通過textarea來模擬返回的HTML片段。

復制代碼代碼如下:

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html($("#clone").val());
                var parent = $("#complex_page_segment");
                $(".previous", parent).click(function() {
                    $(".content", parent).html("Previous Page Content");
                });
                $(".next", parent).click(function() {
                    $(".content", parent).html("Next Page Content");
                });
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    <textarea id="clone" style="display: none;">
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">Page Content</div>
    </div>
    </textarea>

由于我們需要在多個頁面引用同一個HTML片段，這種方法導致大量事情處理被重復性的拷貝粘貼，明顯我們需要將公共的方法提取出來。

3. AJAX返回頁面片段，并調(diào)用頁面片段中的函數(shù)注冊事件

復制代碼代碼如下:

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html($("#clone").val());
                init_complex_page_segment();
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    <textarea id="clone" style="display: none;">
    <script type="text/javascript">
        function init_complex_page_segment() {
            var parent = $("#complex_page_segment");
            $(".previous", parent).click(function() {
                $(".content", parent).html("Previous Page Content");
            });
            $(".next", parent).click(function() {
                $(".content", parent).html("Next Page Content");
            });
        }
    </script>
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">Page Content</div>
    </div>
    </textarea>

其實我們可以更進一步，完全沒必要手工調(diào)用這個函數(shù)，而是可以在返回的HTML片段中讓其自動執(zhí)行。

4. AJAX返回頁面片段，其事件自動注冊

復制代碼代碼如下:

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $("#placeholder").html($("#clone").val());
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>
    <textarea id="clone" style="display: none;">
    <script type="text/javascript">
        $(function() {
            var parent = $("#complex_page_segment");
            $(".previous", parent).click(function() {
                $(".content", parent).html("Previous Page Content");
            });
            $(".next", parent).click(function() {
                $(".content", parent).html("Next Page Content");
            });
        });
    </script>
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">Page Content</div>
    </div>
    </textarea>

最后一種方法和第一種IFrame的方式是我們所推薦的。
下載源代碼

您可能感興趣的文章:

ES10的13個新特性示例(小結(jié))
這篇文章主要介紹了ES10的13個新特性示例(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-09-09
關于火狐(firefox)及ie下event獲取的兩種方法
經(jīng)常有同事問我在火狐瀏覽器怎么獲取event的方法，大多是想獲取event.keyCode的功能,接下來為您介紹兩種實現(xiàn)方法，需要了解的朋友可以參考下
2012-12-12
老生常談jacascript DOM節(jié)點獲取
下面小編就為大家?guī)硪黄仙Ｕ刯acascript DOM節(jié)點獲取。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
js兩個數(shù)組合并去重的方法大全
這篇文章主要給大家介紹了關于js兩個數(shù)組合并去重的相關資料,日常開發(fā)中經(jīng)常會用到的JS數(shù)組去重,文中將每種方法都給出了代碼示例,需要的朋友可以參考下
2023-09-09
JavaScript對象參數(shù)的引用傳遞
這篇文章主要為大家介紹了JavaScript對象參數(shù)的引用傳遞的相關資料，感興趣的小伙伴們可以參考一下
2016-01-01
使用 Jest 和 Supertest 進行接口端點測試實例詳解
這篇文章主要介紹了使用 Jest 和 Supertest 進行接口端點測試,結(jié)合實例形式詳細分析了使用 Jest 和 Supertest 進行接口端點測試具體原理、操作技巧與相關注意事項,需要的朋友可以參考下
2020-04-04
Javascript 事件流和事件綁定
本文中的部分觀點參考至《Javascript高級程序設計》（很好的一本書，推薦大家看看！），addEvent函數(shù)借鑒了YUI2.7的_addListener方法，這里也要謝謝YUI那些牛人，向他們致敬！
2009-07-07
javascript適合移動端的日期時間拾取器
這篇文章主要介紹了javascript適合移動端的日期時間拾取器，提供了友好的日期和時間選擇操作界面，需要的朋友可以參考下
2015-11-11
比較全面的event對像在IE與FF中的區(qū)別推薦
整理的比較全的event對像在ie與firefox瀏覽器中的區(qū)別。
2009-09-09
js中function()使用方法
通過函數(shù)對象的性質(zhì)，可以很方便的將一個函數(shù)賦值給一個變量或者將函數(shù)作為參數(shù)傳遞，下面為大家介紹下函數(shù)的使用語法
2013-12-12