問題描述
有一個比較復雜的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返回頁面片段，並調用頁面片段中的函數注冊事件
復制代碼 代碼如下:
<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>
其實我們可以更進一步，完全沒必要手工調用這個函數，而是可以在返回的HTML片段中讓其自動執行。
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的方式是我們所推薦的。
下載源代碼