2. 程式人生 > >javascript創建css、js，onload觸發callback兼容主流瀏覽器的實現

javascript創建css、js，onload觸發callback兼容主流瀏覽器的實現

阿新 • • 發佈：2017-09-21
question 禁止 rules 跨域問題 onload targe 結合 defined finally

http://www.fantxi.com/blog/archives/load-css-js-callback/

由於需要寫個函數，既可以加載css，又可以加載js，所以對各主流瀏覽器對加載js、css後是否觸發onload事件做了個測試。當然，為了兼容，首先要考慮的是會用到onload和onreadystatechange，但他們並不是萬能的。加載js文件onload觸發callback不算大問題。css比較特殊，因為Webkeit/FF下加載css不會觸發onload事件。所以研究了一晚上才找到個兼容的辦法，分享如下：

首先測試元素直接寫在頁面

  1. <link onload="alert(‘css onload‘)" rel="stylesheet" href="http://localhost/css/123.css"/>
  2. <script onload="alert(‘js onload‘)" src="http://localhost/123.js"></script>
  3. <link onreadystatechange="alert(‘css readystatechange‘)" rel="stylesheet" href="http://localhost/css/123.css"/>
  4. <script onreadystatechange="alert(‘js readystatechange‘)" src="http://localhost/123.js"></script>

CSS onload: 支持: IE6-9/OP, 不支持: FF/Webkit(SF/CM)
JS onload: 支持: IE9/OP/FF/Webkit, 不支持: IE6-8

CSS onreadystatechange: 支持: IE6-9, 不支持: OP/FF/Webkit
JS onreadystatechange: 支持: IE6-9, 不支持: OP/FF/Webkit

測試js創建元素

  1. var doc = document,
  2. head = doc.getElementsByTagName("head")[0],
  3. css, js;
  5. css = doc.createElement(‘link‘);
  6. css.href = ‘http://localhost/123.css?2‘;
  7. css.rel = ‘stylesheet‘;
  8. head.appendChild(css);
  10. js = doc.createElement(‘script‘);
  11. js.src = ‘http://localhost/123.js?2‘;
  12. head.appendChild(js);
  14. css.onload = function(){
  15. alert(‘css onload‘)
  16. }
  17. js.onload = function(){
  18. alert(‘js onload‘)
  19. }
  20. css.onreadystatechange = function(){
  21. alert(‘css readystatechange‘)
  22. //alert(this.readyState) //IE可以得到loading/complete, OP為undefined
  23. }
  24. js.onreadystatechange = function(){
  25. alert(‘js readystatechange‘)
  26. //alert(this.readyState) //IE可以得到loading/loaded, OP為loaded
  27. }

CSS/JS onload:(同元素直接寫在頁面是一樣的)

CSS onreadystatechange: 支持: IE6-9/OP, 不支持: FF/Webkit (這裏有區別，OP支持js創建的css元素，但readyState為undefined)
JS onreadystatechange: 支持: IE6-9/OP, 不支持: FF/Webkit (這裏有區別，OP支持js創建的js元素，readyState為loaded)

所以為了更大的兼容，onload、onreadystatechange都要寫上，代碼類似下面：

  1. // 先把js或者css加到頁面: head.appendChild(node);
  2. // onload為IE6-9/OP下創建CSS的時候，或IE9/OP/FF/Webkit下創建JS的時候
  3. // onreadystatechange為IE6-9/OP下創建CSS或JS的時候
  4. node.onload = node.onreadystatechange = function(){
  5. // !this.readyState 為不支持onreadystatechange的情況，或者OP下創建CSS的情況
  6. // this.readyState === "loaded" 為IE/OP下創建JS的時候
  7. // this.readyState === "complete" 為IE下創建CSS的時候
  8. if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
  9. node.onload = node.onreadystatechange = null; //防止IE內存泄漏
  10. alert(‘loaded, run callback‘);
  11. }
  12. }

jquery、kissy的源碼，判斷加載成功的核心部分差不多都這樣實現的。

存在的問題：
1、當瀏覽器同時支持onload、onreadystatechange的情況會觸發上面的函數兩次，
比如：
IE9加載JS的時候，會alert兩次，加載CSS的時候，alert一次，註釋掉“onload、readystatechange=null”，alert兩次。
OP加載JS/CSS，alert一次，把“onload、readystatechange=null”註釋也會alert兩次。
解決：
先在外部設定個變量isLoaded = false;
"if (!this.readyState..."上面加上個判斷，如果已經加載成功就返回，比如：if (isLoaded) { return; }
"node.onload =..."上面加上 isLoaded = ture;
JQ有沒有加這個我忘記了、KS應該是加了類似的判斷了。

2、這個方法加載JS調用callback是兼容性沒問題了，但是加載CSS再callback支持情況不同了：
IE6-9/OP可以成功alert，但是FF/Webkit不支持css的onload，解決辦法：

2.1、讀取cssRules的length來判斷是否加載成功，缺點不能跨域讀取(非IE)。

  1. var doc = document,
  2. head = document.getElementsByTagName( ‘head‘ )[0],
  3. link = doc.createElement(‘link‘);
  4. //link.href = ‘http://xxx.com/123.css‘; //跨域
  5. link.href = ‘http://localhost/123.css‘;
  6. link.rel = ‘stylesheet‘;
  7. head.appendChild( link );
  9. var sheet, cssRules;
  10. if ( ‘sheet‘ in link ) { //FF/CM/OP
  11. sheet = ‘sheet‘; cssRules = ‘cssRules‘;
  12. }
  13. else { //IE
  14. sheet = ‘styleSheet‘; cssRules = ‘rules‘;
  15. }
  17. var _timer1 = setInterval( function() { // 通過定時器檢測css是否加載成功
  18. try {
  19. if ( link[sheet] && link[sheet][cssRules].length ) { // css被成功加載
  20. // console.log(link[sheet][cssRules]);
  21. clearInterval( _timer1 ); // 清除定時器
  22. clearTimeout( _timer2 );
  23. alert(‘loaded, run callback‘); // 加載成功執行callback
  24. }
  25. } catch( e ) {
  26. // FF看到的可能的報錯：
  27. //本地：nsresult: "0x8053000f (NS_ERROR_DOM_INVALID_ACCESS_ERR)" ，因為沒加載完成還不能讀取，加載完畢就不會報錯了
  28. //跨域：Security error, code: "1000" nsresult: "0x805303e8"，因為不能跨域讀取CSS。。。
  29. //關於跨域訪問：FF/OP/CM都禁止，IE6-9都可以跨域讀取css。
  30. } finally {}
  31. }, 20 ),
  32. // 創建超時定時器，如果過10秒沒檢測到加載成功
  33. _timer2 = setTimeout( function() {
  34. clearInterval( _timer1 ); // 清除定時器
  35. clearTimeout( _timer2 );
  36. alert(‘loaded ? run callback‘); // 都過了這麽長時間了，雖然沒判斷加載成功也執行callback（這裏可能本身就加載失敗，也可能是跨域的情況）
  37. }, 10000 );
  38. //@See: http://stackoverflow.com/questions/5537622/dynamically-loading-css-file-using-javascript-with-callback-without-jquery

2.2、創建div#hack4loaded，並添加到頁面，然後定時讀取div的樣式，如果樣式是css裏面設置的就說明加載成功，此方法不存在跨域問題，所有瀏覽器都OK。（css裏面加上一個樣式: #hack4loaded{display:none}）

  1. var doc = document,
  2. head = doc.getElementsByTagName(‘head‘)[0],
  3. link = doc.createElement(‘link‘);
  4. link.href = ‘http://localhost/123.css‘;
  5. link.rel = ‘stylesheet‘;
  6. head.appendChild( link );
  8. var div = document.createElement(‘div‘);
  9. div.id = ‘hack4loaded‘;
  10. var getStyle = function(name){ //獲取css裏面設置的元素樣式
  11. if(div.currentStyle){ // IE/OP
  12. return div.currentStyle[name];
  13. }else{ // FF/CM
  14. return div.ownerDocument.defaultView.getComputedStyle(div, null)[name];
  15. }
  16. };
  17. document.body.appendChild(div); // 添加到頁面
  18. //創建定時器，讀取創建的div的樣式是否是已經在css裏面設置好的
  19. var _timer1= setInterval( function() {
  20. //console.log(getStyle(‘display‘));
  21. if (‘none‘ === getStyle(‘display‘)) { //樣式和css裏面設置的一樣，說明加載成功
  22. clearInterval( _timer1 ); // 清除定時器
  23. clearTimeout( _timer2 );
  24. div.parentNode.removeChild(div); //移除div
  25. alert(‘loaded, run callback‘); // 加載成功執行callback
  26. }
  27. }, 50 ),
  28. // 創建超時定時器，防止css文件加載失敗的情況
  29. _timer2 = setTimeout( function() {
  30. clearInterval( _timer1 ); // 清除定時器
  31. clearTimeout( _timer2 );
  32. alert(‘fail to load‘); // 這個沒加載成功的可能性很大，再就是網速太慢超時了
  33. }, 10000 );

所以總結如下：

javascript創建js或者css，可以兼容瀏覽器在onload時觸發callback。
只要把上面的“node.onload = node.onreadystatechange = function()”方法，再結合2.2的創建div#hack4loaded的方法結合再一起，就可以創建一個比較完美的支持加載js、css，並可以在文件加載完畢觸發callback的函數。

由於IE/OP支持css的onload，所以寫這個方法的時候可以考慮非IE/OP才用2.2的方法判斷css加載完成。

javascript創建css、js，onload觸發callback兼容主流瀏覽器的實現

相關推薦

javascript創建css、js，onload觸發callback兼容主流瀏覽器的實現

question 禁止 rules 跨域問題 onload targe 結合 defined finally http://www.fantxi.com/blog/archives/load-css-js-callback/ 由於需要寫個函數，既可以加載css，又可

javascript建立css、js，onload觸發callback相容主流瀏覽器的實現

由於需要寫個函式，既可以載入css，又可以載入js，所以對各主流瀏覽器對載入js、css後是否觸發onload事件做了個測試。當然，為了相容，首先要考慮的是會用到onload和onreadystatechange，但他們並不是萬能的。載入js檔案onload觸發call

不同瀏覽器創建 ajax XMLHTTPRequest對象的方法及兼容性問題總結

on() 設置 arr 斷開 告訴 應該 匿名 讀取 abort XMLHttpRequest 對象是AJAX功能的核心，要開發AJAX程序必須從了解XMLHttpRequest 對象開始。 了解XMLHttpRequest 對象就先從創建XMLHttpRequest 對

angularjs之手機輸入法回車變搜索，並觸發事件,兼容pc回車事件

綁定 ima 識別 andro selector and src res win 一、效果：回車按鈕變搜索 之前的輸入法： 之後的輸入法： 二、功能實現 <input type="search" id="search_input" place

IDEA下創建Maven項目，並整合使用Spring、Spring MVC、Mybatis框架

varchar bat 連接 pom.xml文件 http mave eat supported 分享 項目創建 本項目使用的是IDEA 2016創建。項目使用Spring 4.2.6，Mybatis3.4.0,Tomcat使用的是Tomcat8，數據庫為MySQL。 首

用字面量創建對象桌子，有屬性：長、寬、高、面積、體積 有方法：求面積、求體積

屬性 func function table 方法 inf document AR return <script> var table = { length: 60, width: 40, height

python3 速查參考- python基礎 8 -> 面向對象基礎：類的創建與基礎使用，類屬性，property、類方法、靜態方法、常用知識點概念（封裝、繼承等等見下一章）

fde ODB 面向 繼承 普通 實參 使用 後者 people 基礎概念 1.速查筆記： #-- 最普通的類 class C1(C2, C3): spam = 42 # 數據

c++實現二叉樹層序、前序創建二叉樹，遞歸非遞歸實現二叉樹遍歷

log ios cst ack ret 出棧 隊列 結點 非遞歸實現 #include <iostream> #include <cstdio> #include <stdio.h> #include <string> #i

使用CSS3和JavaScript創建一個光滑，動畫的全屏搜索表單

網站 navigator 搜索功能 ppr 16px border ... 增加 屏幕 設計良好且易於訪問的搜索UI可以鼓勵用戶更頻繁地與您網站的搜索功能進行互動，從而提高用戶滿意度並增加頁面瀏覽量。為此，隨著小屏幕設備的主導地位，搜索盒的趨勢是使它們變得非常大和大膽。在本

使用CSS和JavaScript創建基本的視差滾動效果

事情 idt quest 跨瀏覽器 有關 基本 變量引用 因此 -c 網頁設計中2015年最主要的趨勢無疑是視差滾動效應，沒有任何跡象正在減弱。視差滾動將頁面轉換為有趣的幻燈片，其中頁面上的不同元素相對於頁面的滾動以不同的速度移動。在本教程中，我們將熟悉如何在CSS和Jav

將 laravel 專案內靜態檔案，css、js、images 部署到七牛雲 CDN

專案升級，打算把 public 目錄下的 css、js、image等檔案，上傳到七牛雲，一直想搞來著，今天又想起來，正好 laravel 也從 5.2 升級到了 5.7，接下來把這邊一搞，專案就更加優化了。 接上篇文章： 使用 qshell 將本地檔案同步到七牛雲 https://blog.c

HTML檔案裡把所有的css、js檔案引入後，其他的HTML檔案引入該頁面後，可以使用該頁面引入的css和js

怎樣將一個HTML檔案裡把所有的css、js檔案引入後,然後其他的HTML檔案就不需要在進行引入了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

前端框架Vue（13）——vue 中如何對公共css、 js 方法進行單檔案統一管理，全域性呼叫

1、前言 最近，為公司開發交付的一個後臺管理系統專案，我使用了 Vue 框架進行開發實踐。 模組化、元件化、工程化的開發體驗非常好。良好的 api，優雅的設計，對於工程師非常友好。 但是由於模組比較多，我對於每個模組分配了不同的

JavaScript封閉函式、常用內建物件、js除錯方法

1.封閉函式 封閉函式是JavaScript中匿名函式的另外一種寫法，建立一個一開始就執行而不用命名的函式 /在封閉函式前加’;‘,可以避免js壓縮時出錯/;(function(){ alert('hello world!'); })(); /*當i大於78時等於78，小於時等於89*/ v

jsp頁面傳送請求到後臺，當後臺返回到頁面時，css、js等都失效的問題

servlet重定向到jsp後，css樣式和圖片都沒了，原因是在servlet中轉發時css和圖片的路徑變成相對於這個servlet的相對路徑而非相對於web專案的路徑了。解決辦法：匯入css樣式和圖片時把css寫成動態絕對路徑，如用EL表示式表示：<link rel=

解決使用SpringMVC時，css、js、image等靜態資源無法載入的問題

問題：在使用SpringMVC框架時，配置web.xml檔案時，springDispatcherServlet的配置如下 <servlet> <servlet-name>springDispatcherServl

nginx 解決css、js請求路徑無法加載問題

proxy dem jfinal pan oot usr bmp 兩個 cli location / { proxy_pass http://jfinaldemo; root /usr/share/nginx/html;

基於CentOS 6 系統創建邏輯卷LVM，執行擴容，縮減，刪除等操作

靈活 硬盤 erl borde pan local lock 地址 擁有 基於CentOS 6 系統創建邏輯卷LVM，執行擴容，縮減，刪除等操作 2016-08-29 05:37:57 標簽：Linux LVM Fstab VG PV 原創作品，允許轉載，轉載時請務

SQL - 創建一個學生表，要求有主鍵約束和非空約束

creat red 要求 pri har 學生 not null clas sql CREATE TABLE [dbo].[Student] ( [ID] [int] NOT NULL, [Name] [nchar](10) NOT NULL, [Age] [in

JavaScript-創建第一個自己的類庫

spa 內部 man efi i++ ont 基礎上 ner dev 通過上一節面向對象和原型的學習。我們知道了怎樣創建一個類，包含類的私有化屬性和方法、公有化屬性和方法、靜態屬性和方法。在這裏略微回想一下。首先要創建一個類能夠通過1.new obj