問題描述

有一個比較復雜的HTML片段(A)，如果把這個HTML片段嵌入到其他頁面中(B,C,D....)。

問題的關鍵是在HTML片段中有大量的JavaScript邏輯需要處理，比如說分頁，點擊事件響應等。

對于這個問題，我們用一個簡單的例子來說明：

“頁面上有一個按鈕，點擊此按鈕引入一個HTML片段，此HTML片段中有分頁按鈕。”

1. 使用IFrame

主頁面，點擊一個按鈕向頁面引入一個IFrame：

代碼如下:

$(function() {

$("#clickToInsert").click(function() {

$("#placeholder").html('');

});

});

IFrame頁面，模擬分頁的情況：

$(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");

});

});

Page Content

2. AJAX返回頁面片段，并注冊事件

注：我們通過textarea來模擬返回的HTML片段。

代碼如下:

$(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");

});

});

});

Page Content

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

3. AJAX返回頁面片段，并調用頁面片段中的函數注冊事件

代碼如下:

$(function() {

$("#clickToInsert").click(function() {

$("#placeholder").html($("#clone").val());

init_complex_page_segment();

});

});

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");

});

}

Page Content

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

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

代碼如下:

$(function() {

$("#clickToInsert").click(function() {

$("#placeholder").html($("#clone").val());

});

});

$(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");

});

});

Page Content

最后一種方法和第一種IFrame的方式是我們所推薦的。

下載源代碼

總結

以上是生活随笔為你收集整理的多个网页用一个html,在多个页面使用同一个HTML片段的代码-javascript技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。