關于innerHTML的試驗 · 前端筆記

## 關于innerHTML的試驗先來開 **$.html()** ~~~ $('#header').html('<!DOCTYPE html><html><head><title>tt</title></head><body>12<script src="http://tang-h5.com/src/js/common.js?t=__VERSION__"></script></body><html>') // jquery.min.js?t=__VERSION__:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/. Network 上顯示腳本被加載了，并且加載后也執行了試驗的jquery版本： jQuery v3.0.0-beta1 ----- 試驗加載css運行了 ---- 試驗運行js代碼 $('#header').html('<script>alert(1)</script>'); 運行了 ---- 試驗“運行css” $('#header').html('<style>#header{background:red}</style>'); 生效了 ~~~ 再看看 **innerHTML** 會有什么效果 ~~~ document.getElementById('header').innerHTML='<!DOCTYPE html><html><head><title>tt</title></head><body>12<script src="http://tang-h5.com/src/js/common.js?t=232323"></script></body><html>'; Network 上沒有顯示加載請求，也就是說 innerHTML插入的內容中有腳本加載的，也不會自動去請求腳本。 --------- 再試試圖片 document.getElementById('header').innerHTML='<!DOCTYPE html><html><head><title>tt</title></head><body>12<script src="http://tang-h5.com/src/js/common.js?t=232323"></script><img src="1.png" /></body><html>'; Network 上顯示了圖片的請求。再試試css document.getElementById('header').innerHTML='<!DOCTYPE html><html><head><title>tt</title></head><body>12<script src="http://tang-h5.com/src/js/common.js?t=232323"></script><link href="http://tang-h5.com/src/css/app.css?t=__VE1212RSION__" type="text/css" rel="stylesheet" /></body><html>'; css會加載（注意改變版本號，不然有緩存干擾測試） ----- 再試試js代碼 document.getElementById('header').innerHTML='<script>alert(1)</script>'; 不運行！試驗“運行css” document.getElementById('header').innerHTML = '<style>#header{background:#fff}</style>'; 也生效了 ~~~ **分析結論：** | 測試動作 | $.html() | innerHTML | | --- | --- | --- | | 加載js文件 | √ | ? | | 加載css文件 | √ | √ | | 加載圖片文件 | √ | √ | | 運行js | √ | ? | | “運行css” | √ | √ | （注意：注意緩存會干擾影響測試，每次測試都要改變版本號來測試）看來jquery自己做了處理啊傳統網頁瀏覽器默認處理這些動作，但是當自己組裝頁面時就不得不面對這些問題了，所以有必要把這個弄清楚。 > 這些測試動作，對單頁有重要指導作用，尤其是在各種PJAX和單頁框架盛行的現在，比如SUI、Mobilebone等創建頁面時會出現哪些問題，通過實驗分析，我們就知道為什么了，這是個重要但容易被忽視的知識。 ### 參考： [讓插入到 innerHTML 中的 script 跑起來的實現代碼](http://www.jb51.net/article/234.htm) [求教 innerHTML 里面放js代碼如何才能執行-CSDN論壇](http://bbs.csdn.net/topics/392159082) [讓 innerHTML 進來的 script 代碼跑起來](http://www.cnblogs.com/zichi/p/run-innerHTML-script.html) [大流量網站性能優化：一步一步打造一個適合自己的BigRender插件 - 韓子遲 - 博客園](http://www.cnblogs.com/zichi/p/5252629.html) [淘寶詳情頁的 BigRender 優化與存放大塊 HTML 內容的最佳方式](https://lifesinger.wordpress.com/2011/09/23/bigrender-for-taobao-item/) [關于chrome控制臺警告：Synchronous XMLHttpRequest on the main thread終極解決辦法](http://blog.csdn.net/xllily_11/article/details/51879420) >[danger] 從上面的提示可以看出$.html()處理加載外部腳本時使用的是ajax同步哦（ajax同步獲取腳本內容，創建script標簽，然后把內容塞進去）。（不像require.js那樣是通過創建script標簽給src來加載的，利用的是瀏覽器的特性，當然瀏覽器處理外部腳本資源時，其實也是“同步加載”的，參見[你真的了解script標簽嗎？](http://www.hmoore.net/xiak/quanduan/278616)） [jQuery源碼——.html()方法原理解析 - 才子鍋鍋 - 博客園](https://www.cnblogs.com/ihardcoder/p/4497808.html) * * * * * last update：2017-8-7 18:15:20