jQuery.parseHTML() 函式詳解

NO IMAGE

定義和用法

$.parseHTML() 函式用於將HTML字串解析為對應的DOM節點陣列。

注意:

1. 該函式將使用原生的DOM元素建立函式把HTML字串轉換為一個DOM元素的集合,你可以將這些DOM元素插入到文件中。

2. 如果沒有指定context引數,或該引數為null或undefined,則預設為當前document。如果建立的DOM元素用於另一個文件,例如iframe,則應該指定該iframe的document物件。

安全考慮:大多數jQuery API都允許HTML字串在HTML中包含執行指令碼。 jQuery.parseHTML()不會執行解析的HTML中的指令碼,除非你明確將引數keepScripts指定為true。 不過,大多數環境仍然可以間接地執行指令碼,例如:通過屬性。呼叫者應該避免 這樣做,並清理或轉義諸如URL、cookie等來源的任何不受信任的輸入,從而預防出現這種情況。 出於未來的相容性考慮,當引數keepScripts被省略或為false時,呼叫者應該不依賴任何執行腳 本內容的能力。

語法

$.parseHTML( htmlString [, context ] [, keepScripts ] )

引數描述
htmlStringString型別 需要解析並轉為DOM節點陣列的HTML字串
contextElement型別 指定在哪個Document中建立元素,預設為當前文件的document
keepScriptsBoolean型別 指定傳入的HTML字串中是否包含指令碼,預設為false

例項
使用一個HTML字串建立一個陣列的Dom節點,並將它插入一個div


<div id="log">
<h3>Content:</h3>
</div>
<script>
$(function () { 
var $log = $( "#log" ),
str = "hello, <b>my name is</b> jQuery.",
html = $.parseHTML( str ),
nodeNames = [];
//新增已解析的HTML
$log.append( html );
//集合已解析HTML的節點名稱
$.each( html, function( i, el ) {
nodeNames[i] = "<li>"   el.nodeName   "</li>";
});
// 插入節點名
$log.append( "<h3>Node Names:</h3>" );
$( "<ol></ol>" )
.append( nodeNames.join( "" ) )
.appendTo( $log );
})
</script>

示例&說明

以下是與jQuery.parseHTML()函式相關的jQuery示例程式碼,以演示jQuery.parseHTML()函式的具體用法:


// "<\/script>"必須通過\將/轉義,否則JS會認為已經到了指令碼結束的位置
var html = 'Hello,<b>CodePlayer</b><script type="text/javascript">alert("執行指令碼程式碼");<\/script>';
var doms = $.parseHTML( html );
// 不會執行指令碼程式碼
$("#n1").append(doms);
alert("分割線");
doms = $.parseHTML( html, true );
// 會執行指令碼程式碼
$("#n1").append(doms);

返回值

jQuery.parseHTML()函式的返回值為Array型別,返回解析指定HTML字串後的DOM節點陣列。

jQuery.parseHTML使用原生方法將字串轉換為一個DOM節點的集合,然後可以插入到文件。 這些方法渲染所有尾隨或前導文字(即使只是空格)。 為了防止尾隨/前導空格被轉換為文字節點,你可以通過將HTML字串傳遞給jQuery .trim。

預設情況下,如果沒有指定或給定null 或 undefined,context是當前的document。如果HTML被用在另一個document中,比如一個iframe,該frame的檔案可以使用。

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

Security Considerations(安全注意事項)

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