JQuery的html(data)方法與<script>腳本塊的解決方法
更新時(shí)間：2010年03月09日 21:23:59 作者：
在使用Jquery的html(data)方法執(zhí)行寫數(shù)據(jù)到Dom元素時(shí)遇到一個(gè)問題：在data參數(shù)中包含script腳本塊的時(shí)候，html(data)方法的執(zhí)行結(jié)果與預(yù)期不符
“今天才注意到j(luò)Query(...).html()方法返回的HTML會(huì)過濾掉所有的<script>塊，但有時(shí)候，特別是在AJAX應(yīng)用中，常常是需要保留HTML中的<script>塊的,比如局部更新含腳本的內(nèi)容，此時(shí)切忌不要用html()來讀寫HTML，還是要老老實(shí)實(shí)用elem.innerHTML。今天因?yàn)檫@個(gè)問題浪費(fèi)了1個(gè)小時(shí)，特此給大家提個(gè)醒?！?
經(jīng)過測試發(fā)現(xiàn)，新版本（1.3.2之后的，之前版本未考證過）的jQuery(...).html()方法已經(jīng)不存在該問題（html()方法是一個(gè)讀Dom元素?cái)?shù)據(jù)的操作），但是當(dāng)用html(data)方法寫數(shù)據(jù)到Dom元素并且data參數(shù)中包含script腳本時(shí)，又出現(xiàn)了異?，F(xiàn)象：在Firefox（我用的3.6）瀏覽器下執(zhí)行上述操作，data參數(shù)里面的script腳本會(huì)自動(dòng)運(yùn)行，引起頁面破相、異常等錯(cuò)誤，比如我遇到的問題就是：在script中存在document.write方法時(shí)，在執(zhí)行完html(data)操作后整個(gè)頁面的原有的dom元素都消失了，只剩下document.write()方法的執(zhí)行結(jié)果，引起了頁面破相；具體原因待討論，最后還是用elem.innerHTML=data這種方式解決了這個(gè)問題，特此標(biāo)記。
經(jīng)過測試發(fā)現(xiàn)，新版本（1.3.2之后的，之前版本未考證過）的jQuery(...).html()方法已經(jīng)不存在該問題（html()方法是一個(gè)讀Dom元素?cái)?shù)據(jù)的操作），但是當(dāng)用html(data)方法寫數(shù)據(jù)到Dom元素并且data參數(shù)中包含script腳本時(shí)，又出現(xiàn)了異?，F(xiàn)象：在Firefox（我用的3.6）瀏覽器下執(zhí)行上述操作，data參數(shù)里面的script腳本會(huì)自動(dòng)運(yùn)行，引起頁面破相、異常等錯(cuò)誤，比如我遇到的問題就是：在script中存在document.write方法時(shí)，在執(zhí)行完html(data)操作后整個(gè)頁面的原有的dom元素都消失了，只剩下document.write()方法的執(zhí)行結(jié)果，引起了頁面破相；具體原因待討論，最后還是用elem.innerHTML=data這種方式解決了這個(gè)問題，特此標(biāo)記。
您可能感興趣的文章:
- jquery用data方法獲取某個(gè)元素上的事件
- 對(duì) jQuery 中 data 方法的誤解分析
- jQuery中使用data()方法讀取HTML5自定義屬性data-*實(shí)例
- Jquery中ajax方法data參數(shù)的用法小結(jié)
- jquery click([data],fn)使用方法實(shí)例介紹
- jQuery $.data()方法使用注意細(xì)節(jié)
- jQuery中index()方法用法實(shí)例
- jQuery中g(shù)et()方法用法實(shí)例
- jQuery中size()方法用法實(shí)例
- jQuery中each()方法用法實(shí)例
- jQuery中data()方法用法實(shí)例
相關(guān)文章
jQuery 下拉列表 二級(jí)聯(lián)動(dòng)插件分享
jQuery二級(jí)聯(lián)動(dòng)插件：jQuery.selected 一個(gè)頁面可以引用多個(gè)聯(lián)動(dòng)效果2012-03-03
這篇文章主要為大家詳細(xì)介紹了layui前段框架日期控件使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Jquery easyui 實(shí)現(xiàn)動(dòng)態(tài)樹
本文給大家介紹jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹，本文通過代碼實(shí)例相結(jié)合的方式給大家展示jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹的過程，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要介紹了JQuery事件冒泡和默認(rèn)行為代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JQuery之proxy實(shí)現(xiàn)綁定代理方法
下面小編就為大家?guī)硪黄狫Query之proxy實(shí)現(xiàn)綁定代理方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
Jquery 動(dòng)態(tài)循環(huán)輸出表格具體方法
這篇文章主要介紹了Jquery 動(dòng)態(tài)循環(huán)輸出表格具體方法，有需要的朋友可以參考一下2013-11-11
本代碼將實(shí)現(xiàn)以下樣式及功能：日歷標(biāo)題背景色、日歷標(biāo)題字體色、日歷背景色、日歷字體色、假日字體色、背景水印色、是否顯示上月和下月的日期，感興趣的朋友可以了解下哈2013-04-04
JQuery WEUI Select 組件增加搜索欄示例demo
這篇文章主要介紹了JQuery WEUI Select 組件增加搜索欄示例demo,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
jquery實(shí)現(xiàn)文字單行橫移或翻轉(zhuǎn)（上下、左右跳轉(zhuǎn)）
本文詳細(xì)介紹了jquery實(shí)現(xiàn)單行橫移或翻轉(zhuǎn)（上下、左右跳轉(zhuǎn)）的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了JQuery選擇器綁定事件及修改內(nèi)容的方法,涉及bind()、show()、hide()、html()等方法的使用技巧,需要的朋友可以參考下2015-01-01