1. 程式人生 > >給某個元素的innerHTML賦值,並使得值中的js程式碼有效(相容多個瀏覽器)

給某個元素的innerHTML賦值,並使得值中的js程式碼有效(相容多個瀏覽器)

症狀:給某個元素的 innerHTML 設定值時,如果提供的 HTML 程式碼中包含js指令碼,很多時候這些指令碼無效,或者在某種瀏覽器上有效,但在其它瀏覽器上無效。

原因:不同瀏覽器對插入 innerHTML 中的指令碼有不同的處理方法。經過實踐,歸納如下:

  • 對於IE,首先, script 標籤必須帶 defer 屬性,其次,在插入時刻,innerHTML 的所屬節點必須在 DOM 樹中.
  • 對於 Firefox 和Opera,在插入時刻,innerHTML 的所屬節點不可以在 DOM 樹中。

根據上面結論,給出通用的設定 innerHTML 方法:

/*
* 描述:跨瀏覽器的設定 innerHTML 方法
* 允許插入的 HTML 程式碼中包含 script 和 style
* 引數:
*   el: DOM 樹中的節點,設定它的 innerHTML
*   htmlCode: 插入的 HTML 程式碼
* 經測試的瀏覽器: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 來避免。程式碼如下:

/*
 描述:重定義 document.write 函式.
 避免在使用 set_innerHTML 時,插入的 HTML 程式碼中包含 document.write 語句,導致原頁面受到破壞。
*/
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,使得js程式碼有效相容瀏覽器

症狀:給某個元素的 innerHTML 設定值時,如果提供的 HTML 程式碼中包含js指令碼,很多時候這些指令碼無效,或者在某種瀏覽器上有效,但在其它瀏覽器上無效。 原因:不同瀏覽器對插入 innerHTML 中的指令碼有不同的處理方法。經過實踐,歸納如下: 對於IE,首

【特徵工程】一種異常檢測方法、原理、程式碼實現 基於箱線圖

先介紹使用到的方法原理,也就是一種異常檢測的方法。 首先要先了解箱線圖。 箱線圖 箱線圖(Boxplot)也稱箱須圖(Box-whisker Plot),是利用資料中的五個統計量:最小值、第一四分位數、中位數、第三四分位數與最大值來描述資料的一種方法,它也可以

vue 元件從父元件取子元件

父頁面進入一個元件之後給子賦了值,這個子的頁面的資料傳給子子 解決方案:子取到父的值後子的watch 裡使用 this.$root.xx 接收一下資料然後子子在created裡取出this.$ro

2.5Groovy使用方法的結果返回變數

package learn def splitName(fullName) { fullName.split(' ') } // 把方法的返回結果返回給兩個變數 def (firstNa

Dataset定義,賦予---獲取

直接 忘記 獲取值 wro AR columns name string column DataSet ds = new DataSet();//創建DataSet DataTable dt = new DataTable("Table");//創建一個名為T

IDEA 創建Web項目在Tomcat部署運行

con pen ply gpo left gin local first localhost 原文地址:https://www.cnblogs.com/tufujie/p/5738250.html IDEA 14.0.5 apache-tomcat-8.0.32 步驟:F

Vue.js中用webpack合併打包元件實現按需載入

對於現在前端外掛的頻繁更新,所以多多少少要對元件化有點了解,下面這篇文章主要給大家介紹了在Vue.js中用webpack合併打包多個元件並實現按需載入的相關資料,需要的朋友可以參考下。   前言 隨著移動裝置的升級、網路速度的提高,使用者對於web應用的要求越來越高,web

用SVN遷移 程式碼在pycharm進行程式碼提交的詳細配置

SVN 程式碼的遷移與提交 文章目錄 SVN 程式碼的遷移與提交 1.簽出原始碼到本機 2. 文件的修改 3.pycham中svn配置 1.簽出原始碼

ACMNO.9求Sn=a+aa+aaa+…+aa…aaa有na,其中a是一個數字。 例如:2+22+222+2222+22222n=5,n由鍵盤輸入。 輸入 n 輸出 a=2 時

題目描述 求Sn=a+aa+aaa+…+aa…aaa(有n個a)之值,其中a是一個數字。 例如:2+22+222+2222+22222(n=5),n由鍵盤輸入。 輸入 n 輸出 a=2 時的Sn 樣例輸入 5 樣例輸出 24690 來源/

關於資料庫UNIQUE唯一約束可否有null問題

我們都知道unique約束,限制此欄位在資料庫表中此欄位值唯一 但是如果我們不傳值,那麼他預設為null的話,可以有多個嗎? 偉大的毛主席告訴我們:實踐是檢驗真理的唯一標準! 本次測試使用的是資料庫時MySQL 5.5 首先建立一張表將username欄位設定

前端 JQuery獲取一個div下的id

獲取所有的Id值,方法是通過div.class獲取全域性的值,然後再提取具體的Id值 方法一:用for迴圈,因為$("div.class")獲取的是一個數組,通過迴圈讀取出陣列中的每一個元素: var articleIdList = new Array(); var h3=$("div

select設定text的選中相容ios和Android基於jquery

  前一段時間改了一個bug,是因為select引起的。當時我沒有仔細看,只是把bug改完了就完事了,今天來總結一下。   首先說option中我們通常會設定value的屬性的,還有就是text值的,請參見下面的HTML程式碼: 1 <select class="sel" name="">

C#將hashtable的轉換到陣列程式碼

下邊內容內容是關於C#將hashtable的值轉換到陣列中的內容,應該對各位有些用。 var length = ht.Count;Guest[] array = new Guest[length];ht.Values.CopyTo(array, 0); 其中ht為hashtable,其key為字串,val

互斥鎖解決執行緒幾乎同時修改某個共享資料

def test1(): global g_num mutex.acquire() g_num += 100 mutex.release() print(g_num) def test2(): global g_num # 上鎖 如果之前沒有被上鎖 ,那麼此時上所成功 # 如果之間已經被

Android 反射呼叫方法利用此方法展開android通知欄相容4.2及以上

前段時間由於專案需要實現了展開通知欄的功能,所謂展開通知欄,就是通過expand  statusbar的方式將所有通知顯示出來,也就是手勢由頂部下滑展開的介面,statusbar屬於全域性且系統級別的介面,API中並沒有開放獨立的介面供我們呼叫以完成通知欄的展開,所以這裡

c# 畫任意多邊形判斷點是否在多邊形內計算任意多邊形面積

c# winform 中實現計算任意多邊形面積,包括 凹多邊形,線段有交叉的多邊形等。具體形式如下: 目標:計算紅色區域的面積 實現的方法: 1、首先能夠在滑鼠點選事件、滑鼠移動事件、和paint事件中實現多邊形的繪製。 2、利用GraphicsPa

OJ刷題之求Sn=a+aa+aaa+…+aa…aaa有na

問題及程式碼: /* * Copyright (c) 2014, 煙臺大學計算機與控制工程學院 * All rights reserved. * 檔名稱:test.cpp * 作 者:郝俊宇 * 完成日期:2015年 1 月8 日 * 版 本

陣列排序,返回陣列在原陣列的下標序號

  功能:對輸入的陣列進行排序,返回的是,從小到大陣列對應於原陣列的下標(序號) 。比如 1 7 3 2 9  返回:0 3 2 1 4 思想:在函式中動態開闢一個數組,用於儲存下標。初始化的時候為0-(n-1)。陣列值在排序的過程中,下標值也跟著排序。最後返回指向下標陣

怎麼把PHP複選框選中的寫入到資料庫

今天提交表單數到據庫時,CheckBox選中的值不能夠全部提交,浪費了很長時間,最後解決方法如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ

SQL Server儲存過程,傳送陣列引數引數的變通辦法

        最近在做開發過程中碰到這麼一個糾結的問題,需要同時插入N條資料,不想在程式裡控制,但是SQL Sever又不支援陣列引數.所以只能用變通的辦法了.利用SQL Server強大的字串處理傳把陣列格式化為類似"3500320083208#350060052089