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

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

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

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

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

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

對(duì)于 Firefox 和Opera，在插入時(shí)刻，innerHTML 的所屬節(jié)點(diǎn)不可以在 DOM 樹(shù)中。

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

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

/*

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

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

* 參數(shù)：

* el: DOM 樹(shù)中的節(jié)點(diǎn)，設(shè)置它的 innerHTML

* htmlCode: 插入的 HTML 代碼

* 經(jīng)測(cè)試的瀏覽器：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è)問(wèn)題：如果插入的 HTML 代碼中包含 document.write 語(yǔ)句，那么就會(huì)破壞整個(gè)頁(yè)面。對(duì)于這種情況，可以通過(guò)重新定義 document.write 來(lái)避免。代碼如下：

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

/*

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

避免在使用 set_innerHTML 時(shí)，插入的 HTML 代碼中包含 document.write 語(yǔ)句，導(dǎo)致原頁(yè)面受到破壞。

*/

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