innerHTML動(dòng)態(tài)添加html代碼和腳本兼容多個(gè)瀏覽器
癥狀:給某個(gè)元素的 innerHTML 設(shè)置值時(shí),如果提供的 HTML 代碼中包含js腳本,很多時(shí)候這些腳本無效,或者在某種瀏覽器上有效,但在其它瀏覽器上無效。
原因:不同瀏覽器對插入 innerHTML 中的腳本有不同的處理方法。經(jīng)過實(shí)踐,歸納如下:
對于IE,首先, script 標(biāo)簽必須帶 defer 屬性,其次,在插入時(shí)刻,innerHTML 的所屬節(jié)點(diǎn)必須在 DOM 樹中.
對于 Firefox 和Opera,在插入時(shí)刻,innerHTML 的所屬節(jié)點(diǎn)不可以在 DOM 樹中。
根據(jù)上面結(jié)論,給出通用的設(shè)置 innerHTML 方法:
/*
* 描述:跨瀏覽器的設(shè)置 innerHTML 方法
* 允許插入的 HTML 代碼中包含 script 和 style
* 參數(shù):
* el: DOM 樹中的節(jié)點(diǎn),設(shè)置它的 innerHTML
* htmlCode: 插入的 HTML 代碼
* 經(jīng)測試的瀏覽器:ie5+, firefox1.5+, opera8.5+
*/
var set_innerHTML = function (el, htmlCode)
{var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0)
{htmlCode = '<div style="display:none">for IE</div>' + htmlCode;
htmlCode = htmlCode.replace(/<script([^>]*)>/gi,'<script$1 defer="true">');
el.innerHTML = htmlCode;
el.removeChild(el.firstChild);
}
else
{var el_next = el.nextSibling;
var el_parent = el.parentNode;
el_parent.removeChild(el);
el.innerHTML = htmlCode;
if (el_next)
el_parent.insertBefore(el, el_next)
else
el_parent.appendChild(el);
}
}
上面的代碼還有一個(gè)問題:如果插入的 HTML 代碼中包含 document.write 語句,那么就會破壞整個(gè)頁面。對于這種情況,可以通過重新定義 document.write 來避免。代碼如下:
/*
描述:重定義 document.write 函數(shù).
避免在使用 set_innerHTML 時(shí),插入的 HTML 代碼中包含 document.write 語句,導(dǎo)致原頁面受到破壞。
*/
document.write = function(){
var body = document.getElementsByTagName('body')[0];
for (var i = 0; i < arguments.length; i++) {
argument = arguments[i];
if (typeof argument == 'string') {
var el = body.appendChild(document.createElement('div'));
set_innerHTML(el, argument)
}
}
}
- javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
- innerhtml用法 innertext用法 以及innerHTML與innertext的區(qū)別
- IE6-IE9不支持table.innerHTML的解決方法分享
- innerHTML與jquery里的html()區(qū)別介紹
- 放棄用你的InnerHTML來輸出HTML吧 jQuery Tmpl不詳細(xì)講解
- js innerHTML 改變div內(nèi)容的方法
- 調(diào)用innerHTML之后onclick失效問題的解決方法
- IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案
- js使用for循環(huán)與innerHTML獲取選中tr下td值
- innerHTML中標(biāo)簽可以換行的方法匯總
相關(guān)文章
JavaScript使用ZeroClipboard操作剪切板
這篇文章主要為大家詳細(xì)介紹了JavaScript使用ZeroClipboard操作剪切板的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05JavaScript將XML轉(zhuǎn)成JSON的方法
這篇文章主要介紹了JavaScript將XML轉(zhuǎn)成JSON的方法,實(shí)例分析了javascript操作XML文件及格式轉(zhuǎn)化的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03Javascript模擬scroll滾動(dòng)效果腳本
項(xiàng)目需要寫了一段模擬Scroll滾動(dòng)代碼,分享的同時(shí),我有些疑問,希望大家能幫忙解決,代碼如下2008-09-09javascript實(shí)現(xiàn)密碼驗(yàn)證
這篇文章主要介紹了javascript密碼驗(yàn)證的實(shí)現(xiàn)方法,過程很簡單具有一定的參考價(jià)值,適合初學(xué)者學(xué)習(xí)研究,感興趣的小伙伴們可以參考一下2015-11-11JavaScript如何判斷input數(shù)據(jù)類型
這篇文章主要介紹了JavaScript如何判斷input數(shù)據(jù)類型,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02