javascript
多个网页用一个html,在多个页面使用同一个HTML片段的代码-javascript技巧
問題描述
有一個(gè)比較復(fù)雜的HTML片段(A)，如果把這個(gè)HTML片段嵌入到其他頁面中(B,C,D....)。
問題的關(guān)鍵是在HTML片段中有大量的JavaScript邏輯需要處理，比如說分頁，點(diǎn)擊事件響應(yīng)等。
對(duì)于這個(gè)問題，我們用一個(gè)簡(jiǎn)單的例子來說明：
“頁面上有一個(gè)按鈕，點(diǎn)擊此按鈕引入一個(gè)HTML片段，此HTML片段中有分頁按鈕。”
1. 使用IFrame
主頁面，點(diǎn)擊一個(gè)按鈕向頁面引入一個(gè)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返回頁面片段，并注冊(cè)事件
注：我們通過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由于我們需要在多個(gè)頁面引用同一個(gè)HTML片段，這種方法導(dǎo)致大量事情處理被重復(fù)性的拷貝粘貼，明顯我們需要將公共的方法提取出來。
3. AJAX返回頁面片段，并調(diào)用頁面片段中的函數(shù)注冊(cè)事件
代碼如下:
$(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其實(shí)我們可以更進(jìn)一步，完全沒必要手工調(diào)用這個(gè)函數(shù)，而是可以在返回的HTML片段中讓其自動(dòng)執(zhí)行。
4. AJAX返回頁面片段，其事件自動(dòng)注冊(cè)
代碼如下:
$(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的方式是我們所推薦的。
下載源代碼
總結(jié)
以上是生活随笔為你收集整理的多个网页用一个html,在多个页面使用同一个HTML片段的代码-javascript技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html添加背景音乐记事本,肿么在用记事
- 下一篇： gradle idea java ssm