久草热线资源网站,九九影视一区二区三区

深入domManip(下)

我們考慮下面的一個例子：

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

這樣JavaScript 不會執行。換句話能插入script標簽，但是不執行腳本代碼，但是在早起的ie下面，如果設置了defer是另外，這個后面單獨講innerHTML的缺陷會提到

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

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

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

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

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

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

clean() 中會動態產生一個div，將div 的innerHTML 設為傳入的字符串，再用getElementsByTagName('script') 的方式把所有的script 抓出來另行儲存

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

如果是外部js 就動態載入，如果是內聯 js 就用eval()

總結下來，domManip主要就做了兩件事：

1.根據用戶傳入的參數，創建了多個fragment，然后通過回調函數參數傳入
2.控制script的執行過程，在創建fragment的時候不執行，最后dom操作結束后會統一執行

任務

?不會了怎么辦

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實現script加載</button> <div id="test"></div> <script type="text/javascript"> //代碼不執行 $("#test1").click(function() { var div = document.querySelectorAll('div')[0]; div.innerHTML = "<script>alert('慕課網')"; div.innerHTML = '代碼不執行' }) //代碼執行 $("#test2").click(function() { var div = $('div') div.append("<script>alert('慕課網')").append('代碼執行了') }) $("#test3").click(function() { append(document.querySelectorAll('div')[0],"<script>alert('慕課網')" ) }) //==========模擬實現script加載================ function buildFragment(elems, context) { var fragment = context.createDocumentFragment(), nodes = [], i = 0, elem, l = elems.length; for (; i < l; i++) { elem = elems[i]; //創一個元素div做為容器 tmp = fragment.appendChild(context.createElement("div")); //放到文檔碎片中 tmp.innerHTML = elem; } return fragment; } //關閉腳本執行 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('慕課網') //增加false標記 scripts = disableScript(first); hasScripts = true callback.call(parentEles, scripts); } //執行腳本加載 if(hasScripts){ //去掉type鎖定 restoreScript(scripts); //開始執行腳本 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>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

2-3 深入domManip(下)

深入domManip(下)

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

2-3 深入domManip(下)

熱搜

最近搜索清空

深入domManip(下)

任務

提問題

其他問答

寫筆記

您還未綁定服務號

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

手記推薦

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