|
|
一、 問題描述
下面舉個簡單的例子，演示問題所在。在下面的例子中，假設(shè)變量responseText就是AJAX加載的HTML片段數(shù)據(jù)，其中包含腳本彈出一條消息，用innerHTML方法插入ID為ajaxData的DIV中，你可能期望看到彈出那個消息框，結(jié)果你發(fā)現(xiàn)沒有，問題就是這樣。
復(fù)制代碼 代碼如下:
<div id="ajaxData"></div>
<script type="text/Javascript">
var responseText = '<p>這是一個段落</p><script>alert("這是AJAX加載回來的腳本片段")</script>';
document.getElementById('ajaxData').innerHTML = responseText;
</script>
二、兩種解決辦法
1、 利用JavaScript的eval方法執(zhí)行腳本。
本方法的具體實現(xiàn)思路是把xmlHttp.responseText中的腳本都抽取出來，不管AJAX加載的HTML包含多少個腳本塊，我們對找出來的腳本塊都調(diào)用eval方法執(zhí)行它即可。下面提供一個封裝好的函數(shù)：
復(fù)制代碼 代碼如下:
function executeScript(html)
{
var reg = /<script[^>]*>([^/x00]+)$/i;
//對整段HTML片段按<//script>拆分
var htmlBlock = html.split("<//script>");
for (var i in htmlBlock)
{
var blocks;//匹配正則表達(dá)式的內(nèi)容數(shù)組，blocks[1]就是真正的一段腳本內(nèi)容，因為前面reg定義我們用了括號進(jìn)行了捕獲分組
if (blocks = htmlBlock[i].match(reg))
{
//清除可能存在的注釋標(biāo)記，對于注釋結(jié)尾-->可以忽略處理，eval一樣能正常工作
var code = blocks[1].replace(/<!--/, '');
try
{
eval(code) //執(zhí)行腳本
}
catch (e)
{
}
}
}
}
本方法的使用如下，對HTML用innerHTML方法添加到DOM，緊跟著調(diào)用executeScript方法執(zhí)行腳本塊：
復(fù)制代碼 代碼如下:
document.getElementById("div1").innerHTML = xmlHttp.responseText;
executeScript(xmlHttp.responseText);
顯然這個方法還是存在缺陷的，如果xmlHttp.responseText包含像這樣的外部腳本調(diào)用：
<script type="text/Javascript" src="/js/common.js"></script>，executeScript方法不能再深入執(zhí)行這個外部加載的腳本。
2、 學(xué)習(xí)并使用jQuery框架的實現(xiàn)
jQuery對于AJAX加載HTML，是最終在執(zhí)行html(value)方法時把整個xmlHttp.responseText數(shù)據(jù)轉(zhuǎn)換成DOM，然后利用DOM相關(guān)操作方法來找出里面的腳本，最后再把這些腳本插入到head中。具體原理也不好說，先舉個最簡單的例子，然后再分析一下大致思路。先看例子：
復(fù)制代碼 代碼如下:
$.get('ajax.ASPx', function(data)
{
$('#div1').html(data);
});
現(xiàn)在假設(shè)上面ajax.ASPx頁面返回的是HTML片段，而且包含一個或多個腳本塊，甚至外部腳本引用。div1是AJAX請求發(fā)起頁的一個DIV標(biāo)簽的ID，整句代碼實現(xiàn)的結(jié)果是加載ajax.ASPx中的HTML填充到一個ID為div1的DIV標(biāo)簽中。
在匿名回調(diào)函數(shù)中通過typeof(data)可以發(fā)現(xiàn)data還是原始的字符串，即等同于xmlHttp.responseText，通過代碼執(zhí)行跟蹤發(fā)現(xiàn)，對AJAX加載腳本片段的執(zhí)行處理不在jQuery的AJAX模塊代碼中，而是在html(value)方法，即把一段包含腳本塊的HTML字符串插入DOM時，由它負(fù)責(zé)抽出腳本進(jìn)行調(diào)用處理。而html(value)方法其實又是調(diào)用了append(value)方法……，整個過程大概調(diào)用了以下方法，箭頭代表調(diào)用這些方法的先后順序：
html -> append -> domManip -> clean -> evalScript -> globalEval
其中clean方法特別關(guān)鍵，這個方法也是jQuery比較重要的方法，其中也涉及修復(fù)HTML錯誤（標(biāo)簽沒有結(jié)束，表格結(jié)構(gòu)調(diào)整等方法）處理腳本。而腳本的抽出也是在這里進(jìn)行的?？纯聪嚓P(guān)源代碼(jQuery1.3.2)：
復(fù)制代碼 代碼如下:
if (fragment)
{
for (var i = 0; ret[i]; i++)
{
if (jQuery.nodeName(ret[i], "script") && (!ret[i].type || ret[i].type.toLowerCase() === "text/Javascript"))
{
scripts.push(ret[i].parentNode ? ret[i].parentNode.removeChild(ret[i]) : ret[i]);
}
else
{
if (ret[i].nodeType === 1)
ret.splice.apply(ret, [i + 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))));
fragment.appendChild(ret[i]);
}
}
return scripts;
}
另外，在evalScript方法中我們還發(fā)現(xiàn)如下代碼，這里是“同”步加載像<script type="text/Javascript" src="/js/common.js"></script>這樣的外部腳本，解決executeScript方法存在的一個缺陷：
復(fù)制代碼 代碼如下:
if (elem.src)
jQuery.ajax(
{
url: elem.src,
async: false,
dataType: "script"
});
同時也發(fā)現(xiàn)如下代碼，這段代碼是把xmlHttp.responseText中的腳本刪除，因為在這個方法中，jQuery是準(zhǔn)備把抽取的腳本放入head區(qū)，所以刪除可以避免最終的HTML出現(xiàn)重復(fù)的腳本塊：
復(fù)制代碼 代碼如下:
if (elem.parentNode)
最后，在globalEval方法中，發(fā)現(xiàn)head.removeChild( script );方法，就是把腳本插入head后馬上又移除腳本標(biāo)簽，這也是避免因為重復(fù)執(zhí)行html(value)方法在head區(qū)生成重復(fù)的腳本塊。這個移除是不影響腳本執(zhí)行的，同是也是不會清除腳本塊中的相關(guān)變量值。顯然，如果你想看看html(data)最終的執(zhí)行結(jié)果，比如抽取后插入到head的腳本塊是什么，你可以先臨時注釋這一行代碼。
JavaScript技術(shù)：用AJAX返回HTML片段中的JavaScript腳本，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
