jQuery.parseHTML() 函數(shù)詳解
定義和用法
$.parseHTML() 函數(shù)用于將HTML字符串解析為對應(yīng)的DOM節(jié)點數(shù)組。
注意:
1. 該函數(shù)將使用原生的DOM元素創(chuàng)建函數(shù)把HTML字符串轉(zhuǎn)換為一個DOM元素的集合,你可以將這些DOM元素插入到文檔中。
2. 如果沒有指定context參數(shù),或該參數(shù)為null或undefined,則默認為當前document。如果創(chuàng)建的DOM元素用于另一個文檔,例如iframe,則應(yīng)該指定該iframe的document對象。
安全考慮:大多數(shù)jQuery API都允許HTML字符串在HTML中包含運行腳本。 jQuery.parseHTML()不會運行解析的HTML中的腳本,除非你明確將參數(shù)keepScripts指定為true。 不過,大多數(shù)環(huán)境仍然可以間接地執(zhí)行腳本,例如:通過屬性。調(diào)用者應(yīng)該避免 這樣做,并清理或轉(zhuǎn)義諸如URL、cookie等來源的任何不受信任的輸入,從而預(yù)防出現(xiàn)這種情況。 出于未來的兼容性考慮,當參數(shù)keepScripts被省略或為false時,調(diào)用者應(yīng)該不依賴任何運行腳 本內(nèi)容的能力。
語法
$.parseHTML( htmlString [, context ] [, keepScripts ] )
| 參數(shù) | 描述 |
|---|---|
| htmlString | String類型 需要解析并轉(zhuǎn)為DOM節(jié)點數(shù)組的HTML字符串 |
| context | Element類型 指定在哪個Document中創(chuàng)建元素,默認為當前文檔的document |
| keepScripts | Boolean類型 指定傳入的HTML字符串中是否包含腳本,默認為false |
實例
使用一個HTML字符串創(chuàng)建一個數(shù)組的Dom節(jié)點,并將它插入一個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的節(jié)點名稱
$.each( html, function( i, el ) {
nodeNames[i] = "<li>" + el.nodeName + "</li>";
});
// 插入節(jié)點名
$log.append( "<h3>Node Names:</h3>" );
$( "<ol></ol>" )
.append( nodeNames.join( "" ) )
.appendTo( $log );
})
</script>
示例&說明
以下是與jQuery.parseHTML()函數(shù)相關(guān)的jQuery示例代碼,以演示jQuery.parseHTML()函數(shù)的具體用法:
// "<\/script>"必須通過\將/轉(zhuǎn)義,否則JS會認為已經(jīng)到了腳本結(jié)束的位置
var html = 'Hello,<b>CodePlayer</b><script type="text/javascript">alert("執(zhí)行腳本代碼");<\/script>';
var doms = $.parseHTML( html );
// 不會執(zhí)行腳本代碼
$("#n1").append(doms);
alert("分割線");
doms = $.parseHTML( html, true );
// 會執(zhí)行腳本代碼
$("#n1").append(doms);
返回值
jQuery.parseHTML()函數(shù)的返回值為Array類型,返回解析指定HTML字符串后的DOM節(jié)點數(shù)組。
jQuery.parseHTML使用原生方法將字符串轉(zhuǎn)換為一個DOM節(jié)點的集合,然后可以插入到文檔。 這些方法渲染所有尾隨或前導(dǎo)文本(即使只是空格)。 為了防止尾隨/前導(dǎo)空格被轉(zhuǎn)換為文本節(jié)點,你可以通過將HTML字符串傳遞給jQuery .trim。
默認情況下,如果沒有指定或給定null 或 undefined,context是當前的document。如果HTML被用在另一個document中,比如一個iframe,該frame的文件可以使用。
在3.0中,這種默認行為已經(jīng)被改變。如果沒有指定context,或者給定值為null 或 undefined,那么將使用一個新的document。這有可能會提高安全性,因為當HTML解析時,內(nèi)嵌的事件將不會執(zhí)行。一旦解析的HTML注入到文檔中它會執(zhí)行,但是這給工具一個機會,遍歷創(chuàng)建DOM和刪除任何東西被視為不安全。這種改進并不適用于jQuery.parseHTML的內(nèi)部使用,因為他們通常傳遞給當前文檔。因此,如類似$( "#log" ).append( $( htmlString ) )的聲明,仍然受制于惡意代碼注入。
Security Considerations(安全注意事項)
大多數(shù)的jQuery的API接受的HTML字符串將運行所包含在HTML中的腳本。jQuery.parseHTML不運行HTML中解析出來的腳本,除非 keepScripts參數(shù)為true。然而,它仍然是可能在大多數(shù)環(huán)境中間接地執(zhí)行腳本,例如通過<img onerror>屬性。調(diào)用者應(yīng)該意識到這一點,并通過清理或避免任何不可信來源的輸入,如URL或cookies,來防止它。為了未來的兼容性,當keepScripts為不確定的或false時,調(diào)用者不應(yīng)該依賴于這個能力來運行任何腳本內(nèi)容。
- 解決jquery有正確返回值但不執(zhí)行success函數(shù)的問題
- jQuery中常用動畫效果函數(shù)知識點整理
- jQuery實現(xiàn)ajax回調(diào)函數(shù)帶入?yún)?shù)的方法示例
- 基于jquery trigger函數(shù)無法觸發(fā)a標簽的兩種解決方法
- JavaScript自執(zhí)行函數(shù)和jQuery擴展方法詳解
- jQuery使用bind函數(shù)實現(xiàn)綁定多個事件的方法
- jquery中封裝函數(shù)傳遞當前元素的方法示例
- jQuery中map函數(shù)的兩種方式
- jquery中用函數(shù)來設(shè)置css樣式
- jquery的$().each和$.each的區(qū)別
相關(guān)文章
用jquery設(shè)置按鈕的disabled屬性的實現(xiàn)代碼
在html標簽中設(shè)置按鈕被禁用,可以使用如下代碼2010-11-11
基于jquery實現(xiàn)的鼠標拖拽元素復(fù)制并寫入效果
基于jquery實現(xiàn)的鼠標拖拽元素復(fù)制并寫入效果的實現(xiàn)代碼,需要的朋友可以參考下。2011-08-08

