曰本真人性做爰色,中文字幕在线观看亚洲视频

2-3 深入domManip(下)
收藏

深入domManip(下)

我們考慮下面的一個(gè)例子：

var div = document.querySelectorAll('div')[0];
div.innerHTML = "<script>alert('慕課網(wǎng)')";

這樣JavaScript 不會(huì)執(zhí)行。換句話能插入script標(biāo)簽，但是不執(zhí)行腳本代碼，但是在早起的ie下面，如果設(shè)置了defer是另外，這個(gè)后面單獨(dú)講innerHTML的缺陷會(huì)提到

如果我們換成jQuery的appned方法：這樣的處理代碼就執(zhí)行了，可見jQuery的方法內(nèi)部可不是那么簡單的處理了

$('div').append("<script>alert('慕課網(wǎng)')")

簡單講，如果.html()傳入的字符串有

<script> <object> <embedt> <optiont> <style>

其中一個(gè) .html()方法就不會(huì)用innerHTML 操作，而是用jQuery.append() 處理字符串塞入

.append()-> .domManip() -> buildFragment() ->clean() 這樣的處理流程

clean() 中會(huì)動(dòng)態(tài)產(chǎn)生一個(gè)div，將div 的innerHTML 設(shè)為傳入的字符串，再用getElementsByTagName('script') 的方式把所有的script 抓出來另行儲(chǔ)存

clean() 執(zhí)行完畢回到domManip() 中， domManip() 再將script 們一一拿出來執(zhí)行

如果是外部js 就動(dòng)態(tài)載入，如果是內(nèi)聯(lián) js 就用eval()

總結(jié)下來，domManip主要就做了兩件事：

1.根據(jù)用戶傳入的參數(shù)，創(chuàng)建了多個(gè)fragment，然后通過回調(diào)函數(shù)參數(shù)傳入
2.控制script的執(zhí)行過程，在創(chuàng)建fragment的時(shí)候不執(zhí)行，最后dom操作結(jié)束后會(huì)統(tǒng)一執(zhí)行

任務(wù)

?不會(huì)了怎么辦

||

index.html

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <title>domManip</title> </head> <body> <button id="test1">div.innerHTML</button> <button id="test2">$.append</button> <button id="test3">模擬append實(shí)現(xiàn)script加載</button> <div id="test"></div> <script type="text/javascript"> //代碼不執(zhí)行 $("#test1").click(function() { var div = document.querySelectorAll('div')[0]; div.innerHTML = "<script>alert('慕課網(wǎng)')"; div.innerHTML = '代碼不執(zhí)行' }) //代碼執(zhí)行 $("#test2").click(function() { var div = $('div') div.append("<script>alert('慕課網(wǎng)')").append('代碼執(zhí)行了') }) $("#test3").click(function() { append(document.querySelectorAll('div')[0],"<script>alert('慕課網(wǎng)')" ) }) //==========模擬實(shí)現(xiàn)script加載================ function buildFragment(elems, context) { var fragment = context.createDocumentFragment(), nodes = [], i = 0, elem, l = elems.length; for (; i < l; i++) { elem = elems[i]; //創(chuàng)一個(gè)元素div做為容器 tmp = fragment.appendChild(context.createElement("div")); //放到文檔碎片中 tmp.innerHTML = elem; } return fragment; } //關(guān)閉腳本執(zhí)行 function disableScript(elem) { elem.type = (elem.getAttribute("type") !== null) + "/" + elem.type; return elem; } //還原腳本 function restoreScript(elem) { elem.removeAttribute("type"); return elem; } function domManip(parentEles, target, callback) { var l = parentEles.length; var iNoClone = l - 1; var scripts; var hasScripts; if (l) { var fragment = buildFragment([target], parentEles[0].ownerDocument); var first = fragment.firstChild.firstChild if (first) { //"<script type="false/">alert('慕課網(wǎng)') //增加false標(biāo)記 scripts = disableScript(first); hasScripts = true callback.call(parentEles, scripts); } //執(zhí)行腳本加載 if(hasScripts){ //去掉type鎖定 restoreScript(scripts); //開始執(zhí)行腳本 var code = scripts.textContent.replace(/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g, ""); eval(code) } } } function append(parentEles, target) { return domManip([parentEles], target, function(elem) { parentEles.appendChild(elem) }); } </script> </body> </html>

提問題

提交

其他問答

查看更多本節(jié)問答

寫筆記

公開筆記

提交

||

全屏

請(qǐng)驗(yàn)證，完成請(qǐng)求

由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求

打開微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問題答復(fù)提醒
· 賬號(hào)支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書簽

最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

2-3 深入domManip(下)

深入domManip(下)

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

2-3 深入domManip(下)

熱搜

最近搜索清空

深入domManip(下)

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～