快捷導(dǎo)航

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

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

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

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

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

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

復(fù)制代碼代碼如下:

    <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片段。

復(fù)制代碼代碼如下:

    <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片段，這種方法導(dǎo)致大量事情處理被重復(fù)性的拷貝粘貼，明顯我們需要將公共的方法提取出來。

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

復(fù)制代碼代碼如下:

    <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返回頁面片段，其事件自動注冊

復(fù)制代碼代碼如下:

    <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>