在頁面中動態追加html片段的時候，有時候動態添加的代碼會含有<script>標簽，比如用了一些模板引擎，或者你的代碼有些復雜的時候。然而我們用DOM提供的innerHTML方式來添加代碼的時候，<script>標簽中的代碼并不能執行，如果有src屬性，指向的外聯文件也不會被加載，這并不是瀏覽器的bug，因為w3c文檔就是這么規定的。

? ? ?那我們有什么辦法可以恢復追加的<script>標簽的代碼執行能力呢？

?

重新構造<script>標簽

? ? ?這個思路其實非常簡單，用innerHTML添加的<script>無法執行，但是我們script創建節點，并用appendChild追加上去是可以的，所以我們只需要做一下二次工作就可以了，看下面的例子：

? ? ?頁面上有個容器：

<div id="cont"></div>

　　js代碼如下：

var html = '<div>html</div><script>alert(1);<\/script>'; var cont = document.getElementById('cont'); cont.innerHTML = html; var oldScript = cont.getElementsByTagName('script')[0]; cont.removeChild(oldScript); var newScript = document.createElement('script'); newScript.type = 'text/javascript'; newScript.innerHTML = oldScript.innerHTML; cont.appendChild(newScript);

　　這只是內聯<script>的方法，如果是引用的外部js文件，那么我們需要為新創建的script節點指定src屬性。

?

eval大法

? ? ?雖然eval因為其安全性不推薦使用，但是在此特殊場景，使用eval確是非常簡單的解決方案，就是把<script>標簽中的代碼eval一下手動執行，就ok了，看下面代碼：

var html = '<div>html</div><script>alert(1);<\/script>'; var cont = document.getElementById('cont'); cont.innerHTML = html; var oldScript = cont.getElementsByTagName('script')[0]; cont.removeChild(oldScript); var scriptText = oldScript.innerHTML; eval(scriptText);

　　對于內聯的代碼，簡單而有效，如果是外部js文件，那么還是使用上面的方法，為新創建的script節點指定src屬性。

?

document.write大法

? ? ?此方法可以在頁面上直接輸出任何html內容，包含<script>標簽的話會立即執行，所以也是一種方案，如下：

var html = '<div>html</div><script>alert(1);<\/script>'; document.write(html);

　　代碼就直接執行了。但是他的缺點是如果代碼寫在文檔底部，輸出的內容會把頁面上的其他內容全部覆蓋，相當于清空了頁面。解決的辦法只有這樣了：

<div id="cont"><script type="text/javascript">document.write(html);</script></div>

　　直接把它放在標簽中，就會往這個標簽中輸出東西了。

?

使用jQuery的html()

? ? ?上面的方法說來說去，都不如jQuery簡單，因為jQuery的html()方法內部已經做了處理，如果參數中含有<script>標簽，內部會使用eval和創建新節點的方式進行處理，如果是外聯的js文件，jQuery會發一個同步的ajax請求來獲取代碼，注意，是同步的！所以不論是內聯的js代碼還是外聯的js文件，都可以正常執行，同時在執行完后刪去<script>標簽。所以，使用jQuery你只需要這樣：

var html = '<div>html</div><script>alert(1);<\/script>'; $('#cont').html(html);

　　這個alert就妥妥的執行了。到這里，我真想說：jQuery，你真是俺親娘！

總結

以上是生活随笔為你收集整理的动态添加js 代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。