jQuery.parseHTML()

admin發表於2017-02-24
jQueryHTML

此方法用於將HTML字串解析為對應的DOM節點。

返回值是儲存DOM節點的陣列。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
jQuery.parseHTML(data [, context ] [, keepScripts ])

引數解析:

（1）.data：需要解析並轉為DOM節點陣列的HTML字串。

（2）.context:可選，指定在哪個Document中建立元素。

（3）.keepScripts:布林值，表明是否在傳遞的HTML字串中包含指令碼；預設為false，表示不包含。

jQuery1.8版本新增。

預設情況下，如果沒有指定或給定null 或 undefined，context是當前的document。如果HTML被用在另一個document中，比如一個iframe，該frame的檔案可以使用。在jQuery3.0中，這種預設行為已經被改變。如果沒有指定context，或者給定值為null 或 undefined，那麼將使用一個新的document。這有可能會提高安全性，因為當HTML解析時，內嵌的事件將不會執行。一旦解析的HTML注入到文件中它會執行，但是這給工具一個機會，遍歷建立DOM和刪除任何東西被視為不安全。這種改進並不適用於jQuery.parseHTML的內部使用，因為他們通常傳遞給當前文件。因此，如類似$("#ant").append($(htmlString))的宣告，仍然受制於惡意程式碼注入。

安全注意事項：

大多數jQuery的API接受的HTML字串將執行所包含在HTML中的指令碼。jQuery.parseHTML不執行HTML中解析出來的指令碼，除非 keepScripts引數為true。然而，它仍然是可能在大多數環境中間接地執行指令碼，例如通過<img onerror>屬性。呼叫者應該意識到這一點，並通過清理或避免任何不可信來源的輸入，如URL或cookies，來防止。為了未來相容性，當keepScripts不確定的或false時，呼叫者不應該依賴於這個能力來執行任何指令碼內容。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:200px;
  height:200px;
  border:1px solid blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  var str = "<b>螞蟻部落</b><script>alert('指令碼程式碼');<\/script>";
  var html = $.parseHTML(str,true);
  $("div").append(html);
}) 
</script>
</head>
<body>
<div></div>
</body>
</html>

可以自行修改keepScripts引數值檢視演示效果。