給某個元素的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(有n個a)之值,其中a是一個數字。 例如:2+22+222+2222+22222(n=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(有n個a)之值
問題及程式碼: /* * 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