innerHTML動態(tài)添加html代碼和腳本兼容多個瀏覽器

更新時間：2014年10月11日 17:42:01 投稿：whsnow

innerHTML動態(tài)添加html代碼和腳本，給某個元素的innerHTML賦值,并使得值中的js代碼有效且兼容多個瀏覽器，很棒的一個方法

癥狀：給某個元素的 innerHTML 設(shè)置值時，如果提供的 HTML 代碼中包含js腳本，很多時候這些腳本無效，或者在某種瀏覽器上有效，但在其它瀏覽器上無效。

原因：不同瀏覽器對插入 innerHTML 中的腳本有不同的處理方法。經(jīng)過實踐，歸納如下：

對于IE，首先, script 標(biāo)簽必須帶 defer 屬性，其次,在插入時刻，innerHTML 的所屬節(jié)點必須在 DOM 樹中.

對于 Firefox 和Opera，在插入時刻，innerHTML 的所屬節(jié)點不可以在 DOM 樹中。

根據(jù)上面結(jié)論，給出通用的設(shè)置 innerHTML 方法:

復(fù)制代碼代碼如下:

/*

* 描述：跨瀏覽器的設(shè)置 innerHTML 方法

* 允許插入的 HTML 代碼中包含 script 和 style

* 參數(shù)：

* el: DOM 樹中的節(jié)點，設(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);

}

}

上面的代碼還有一個問題：如果插入的 HTML 代碼中包含 document.write 語句，那么就會破壞整個頁面。對于這種情況，可以通過重新定義 document.write 來避免。代碼如下：

復(fù)制代碼代碼如下:

/*

描述：重定義 document.write 函數(shù).

避免在使用 set_innerHTML 時，插入的 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)

}

}

}

您可能感興趣的文章:

innerHTML

相關(guān)文章

JavaScript兼容瀏覽器FF/IE技巧
本文給大家分享的是一個JavaScript兼容火狐瀏覽器與IE瀏覽器的一個小技巧，非常的簡單實用，有需要的小伙伴可以參考下
2016-08-08
uni-app調(diào)取接口的3種方式以及封裝uni.request()詳解
我們在實際工作中要將數(shù)據(jù)傳輸?shù)椒?wù)器端,從服務(wù)器端獲取信息,都是通過接口的形式,下面這篇文章主要給大家介紹了關(guān)于uni-app調(diào)取接口的3種方式以及封裝uni.request()的相關(guān)資料,需要的朋友可以參考下
2022-08-08
Javascript實現(xiàn)簡易導(dǎo)航欄
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)簡易導(dǎo)航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
js獲取系統(tǒng)的根路徑實現(xiàn)介紹
js如何獲取系統(tǒng)的根路徑，在本文給出了詳細的方法，感興趣的朋友可以參考下，希望對大家有所幫助
2013-09-09
理解JavaScript的prototype屬性
JavaScript可以說是最讓人初學(xué)者難以理解的單一屬性。我看了一些資料后，開始明白其實這些困難很大程度來自prototype這個名字本身的二義性
2012-02-02
javascript創(chuàng)建含數(shù)字字母的隨機字符串方法總結(jié)
如果想創(chuàng)建一個含有數(shù)字、字母（大小寫）或者符號的字符串，比如從[a-zA-Z0-9]集合中中創(chuàng)建一個隨機的字符串，長度為5.有沒有什么比較好的代碼呢？本文提供了幾種方法，包括自動改變字符集合。一起來學(xué)習(xí)下。
2016-08-08
如何基于viewport vm適配移動端頁面
這篇文章主要介紹了如何基于viewport vm適配移動端頁面,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-11-11
bootstrap手風(fēng)琴制作方法詳解
這篇文章主要為大家詳細介紹了bootstrap手風(fēng)琴的制作方法，制作聲明式觸發(fā)手風(fēng)琴，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
JS?中的URLSearchParams?對象操作(以對象的形式上傳參數(shù)到url)
這篇文章主要介紹了JS中URLSearchParams的基本用法，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
js移除事件 js綁定事件實例應(yīng)用
本文將詳細介紹js移除事件 js綁定事件的實現(xiàn)過程，需要了解的朋友可以參考下
2012-11-11