讓 innerHTML 進來的 script 程式碼跑起來

阿新 • • 發佈：2019-01-17

今天來簡單聊聊如何讓 innerHTML 進來的 scrip 程式碼跑起來的問題。

前臺請求一個介面，介面返回一些 HTML 標籤拼接成的字串，以供前端直接 innerHTML 生成 DOM 元素，這樣的做法非常普遍。但是你是否遇到過，如果字串中拼接的 HTML 標籤中有 script 標籤，那麼該段指令碼是無法執行的，這並不是 bug，而是 w3c 的文件規定的。

比如如下這段程式碼，innerHTML 插入的指令碼（alert）並不會執行：

<div id="myDiv">
</div>

<script>
  // 模擬介面返回資料
  var strVar = "";
    strVar += "<script>alert('hello world')<\/script>";

  document.getElementById('myDiv').innerHTML = strVar;
</script>

那麼問題來了，如何使得 innerHTML 進來的 script 程式碼能夠跑起來？

方案一：重新構造 script 標籤

思路非常簡單，構造新的 script 標籤，然後該標籤的 innerHTML 賦值為需要渲染的指令碼。虛擬碼如下：

var s = document.createElement('script');
s.innerHTML = text;
document.body.appendChild(s);

當然如果要寫的完美一點，執行完 s 後還需要 remove 掉。如何獲取 text 值？兩個方法，其一可以正則匹配 strVal，提取 script 標籤內的內容，這點和 BigRender

類似，而 BigRender 除了提取 script 標籤，還需要提取 style 標籤，無疑更復雜；第二個方法是可以用 document.getElementsByTagName('script') 獲取插入 DOM 但並未執行的 script 指令碼，但是這樣會把頁面所有指令碼全部提取，所以還需要判斷。（可以獲取某一節點下的 script 標籤）

如果是外部的 js 檔案，需要為新建的 script 元素新增 src 屬性即可。

方案二：eval 大法

事實上，如果是 inline JavaScript，方案一求得的 text，可以直接 eval 之。

但是如果是外聯 js 檔案，同上，需要新建 script 標籤然後指定 src 屬性。

方案三：document.write

document.write 接收一個字串作為引數，並且支援 script 標籤以及其他 HTML 標籤拼成的字串，看起來似乎是完美的方案。不過鑑於 document.write 的怪屬性，只適合 strVal 在首頁輸出流中的渲染情況，如果是非同步的請求，就可以放棄了。

舉個栗子：

hello world
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div>
<script>
    $.get('data.php', function(data) {
      document.write(data);
    })
</script>
</div>

目的似乎是為了在 div 中嵌入 data，但是 hello world 字樣也消失了，很顯然，非同步請求後重啟輸入流，將頁面全部覆蓋掉了。

方案四：jQuery html() 方法

使用封裝過的方法無疑是個好辦法：

<div id="myDiv"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $.get('data.php', function(data) {
    $('#myDiv').html(data);
  })
</script>

如果已經引入了 jQuery，無疑是最佳方案，沒必要重複造輪子了。

方案五：利用 img 標籤

黑魔法，如果後臺介面可控的話。

比方說我希望 innerHTML 的內容如下：

<div></div>
<script>
  alert('hello world');
</script>

我們可以這樣構造 img：

<div id='myDiv'></div>
<script>
  var str = "<div></div>";
  str += "<img src='empty.gif' onload='alert(\"hello world\"); this.parentNode.removeChild(this);' />";
  document.getElementById('myDiv').innerHTML = str;
</script>

其他：特殊的 IE

事實上，一定條件下，innerHTML 進來的 script 指令碼，在 IE（IE9-？）下是可以觸發的。

需要滿足的條件如下：

指令碼有 defer 屬性
指令碼並不是 innerHTML 的第一個元素（ script 元素必須位於 "有作用域的元素" 之後。如果通過innerHTML 插入的字串開頭就是一個 "無作用域的元素"，那麼 IE 會在解析這個字串前先刪除該元素）

code：

<body> 
<div id='myDiv'></div>
<script type="text/javascript">
  var strVar = "";
  strVar += "<span style='display: none'>hack ie</span><script defer='true'>";
  strVar += "alert('hello world');";
  strVar += "<\/script>";

  document.getElementById("myDiv").innerHTML = strVar;
</script>
</body>

參考：

讓 innerHTML 進來的 script 程式碼跑起來

方案一：重新構造 script 標籤

方案二：eval 大法

方案三：document.write

方案四：jQuery html() 方法

方案五：利用 img 標籤

其他：特殊的 IE

讓 innerHTML 進來的 script 程式碼跑起來

讓我們的LED燈跑起來

讓Mongo在Spring中跑起來

Project Perfect讓Swift在伺服器端跑起來－Hi Linux(二)

讓innerHTML的js指令碼執行起來總結

corethink功能模塊探索開發（四）讓這個模塊跑起來

讓Kafka在scala裏面跑起來

讓Web應用跑起來

Qt讓桌面圖示跑起來

怎樣讓Nordic的nrf52840跑起來第一個例程

如何在idea中部署一個tomcat伺服器，讓web專案跑起來？

如何讓我們的PHP在Jexus中跑起來

10大最適合程式設計的字型推薦下載，讓程式碼看起來更美更舒服！

讓初學者把Rxjava+Retrofit先跑起來

讓程式碼看起來更舒服（1）：選擇適合的配色方案（更新配色方案生成器）

cocos2dx開發-讓例子（新建cocos專案）在android機器上跑起來

玩轉Eclipse — 讓程式碼飛起來

create-react-app原始碼解析（一），npm run start如何讓專案跑起來

一個javaweb新手，eclipse如何配置tomcat，讓純前端頁面在瀏覽器跑起來

angular2部署到tomcat中，讓他跑起來

讓 innerHTML 進來的 script 程式碼跑起來

方案一：重新構造 script 標籤

方案二：eval 大法

方案三：document.write

方案四：jQuery html() 方法

方案五： 利用 img 標籤

其他： 特殊的 IE

相關推薦

方案五：利用 img 標籤

其他：特殊的 IE