Update loading events test for script and style fetching

soda-x · Jun 27, 2012 · 9aea471 · 9aea471
1 parent 43b788f
commit 9aea471
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 95 deletions.
diff --git a/src/util-fetch.js b/src/util-fetch.js
@@ -78,10 +78,6 @@
         callback()
       }
     }
-
-    // NOTICE:
-    // Nothing will happen in Opera when the file status is 404. In this case,
-    // the callback will be called when time is out.
   }
 
   function styleOnload(node, callback) {

diff --git a/test/research/load-js-css/css-preload.html b/test/research/load-js-css/css-preload.html
@@ -13,80 +13,101 @@
 
 <script>
 
+  if (typeof  console === 'undefined') {
+    console = {
+      log: function() {
+      }
+    }
+  }
+
+
   // test cases
-  var head = document.getElementsByTagName('head')[0];
-  var timestamp = new Date().getTime();
-  var isWebKit = navigator.userAgent.indexOf('AppleWebKit') !== -1;
+  var head = document.getElementsByTagName('head')[0]
+  var timestamp = new Date().getTime()
+
+  var ua = navigator.userAgent
+  var isSafari = ua.indexOf('Safari') !== -1 && ua.indexOf('Chrome') === -1
+  var isFirefox = ua.indexOf('Firefox') !== -1
+  print(ua)
 
-  print(navigator.userAgent);
 
   // 同域
-  getStyle('red.php');
+  getStyle('red.php')
+
   // 404
-  getStyle('404.css');
+  getStyle('404.css')
+
   // 跨域
-  getStyle('http://127.0.0.1/~lifesinger/seajs/seajs/test/research/load-js-css/blue.php');
+  getStyle('http://127.0.0.1/~lifesinger/seajs/seajs/test/research/load-js-css/blue.php')
 
 
   function getStyle(url) {
-    var s = document.createElement('link');
-    s.rel = 'stylesheet';
+    var s = document.createElement('link')
+    s.rel = 'stylesheet'
 
-    // for IE6-9 and Opera
-    if (window.attachEvent) {
-      s.onload = function() {
-        print('style is loaded. [onload] ' + url);
-      };
+    // for Safari and Old Firefox
+    if(isSafari || ( isFirefox && !('onload' in s) )) {
+      poll(s, url)
     }
-    // for WebKit and Firefox
+    // for Firefox, Chrome, IE, Opera
     else {
-      poll(s, url);
+      s.onload = function() {
+        print('style is loaded. [onload] ' + url)
+      }
+
+      s.onerror = function() {
+        print('style is loaded. [onerror] ' + url)
+      }
+
+      s.onreadystatechange = function() {
+        print('style is loaded. [onreadystatechange] ' + url)
+      }
     }
 
-    s.href = url + '?' + timestamp;
-    head.appendChild(s);
+    s.href = url + '?' + timestamp
+    head.appendChild(s)
   }
 
   function poll(node, url) {
-    var isLoaded = false;
+    var isLoaded = false
 
-    if (isWebKit) {
-      console.log('node.sheet = ' + node.sheet + ' ' + url);
+    if (isSafari) {
+      console.log('node.sheet = ' + node.sheet + ' ' + url)
       if (node.sheet) {
-        isLoaded = true;
-        console.log('node.sheet.cssRules = ' + node.sheet.cssRules + ' ' + url);
+        isLoaded = true
+        console.log('node.sheet.cssRules = ' + node.sheet.cssRules + ' ' + url)
       }
     }
     // for Firefox
     else if(node.sheet) {
       try {
         if (node.sheet.cssRules) {
-          console.log(node.sheet.cssRules + ' ' + url);
-          isLoaded = true;
+          console.log(node.sheet.cssRules + ' ' + url)
+          isLoaded = true
         }
       } catch(ex) {
-        console.log(ex.code + ' ' + url);
+        console.log(ex.code + ' ' + url)
         if (ex.name === 'NS_ERROR_DOM_SECURITY_ERR' ||
             ex.name === 'SecurityError') {
-          isLoaded = true;
+          isLoaded = true
         }
       }
     }
 
     if (isLoaded) {
-      print('style is loaded. [poll] ' + url);
+      print('style is loaded. [poll] ' + url)
     } else {
       setTimeout(function() {
-        poll(node, url);
-      }, 1000);
+        poll(node, url)
+      }, 1000)
     }
   }
 
 
   function print(msg) {
-    var p = document.createElement('P');
-    p.appendChild(document.createTextNode(msg));
-    document.getElementById('out').appendChild(p);
+    var p = document.createElement('P')
+    p.appendChild(document.createTextNode(msg))
+    document.getElementById('out').appendChild(p)
   }
 
 </script>

diff --git a/test/research/load-js-css/syntax-error.css b/test/research/load-js-css/syntax-error.css
@@ -0,0 +1,2 @@
+a {
+  xxx:
diff --git a/test/research/load-js-css/syntax-error.js b/test/research/load-js-css/syntax-error.js
@@ -0,0 +1,3 @@
+function({
+
+}
diff --git a/test/research/load-js-css/test.html b/test/research/load-js-css/test.html
@@ -14,36 +14,27 @@ <h2>Summary</h2>
 <pre>
 js:
 
-  Firefox, Chrome, Safari:
+  Chrome, Firefox, Safari, Opera:
     下载成功时触发 onload, 下载失败时触发 onerror
     下载成功包括 200, 302, 304 等，只要下载下来了就好
     下载失败指没下载下来，比如 404
 
+  IE9:
+    Chrome 的行为 + IE6-8 的行为
+
   IE6-8:
     下载成功和失败时都会触发 onreadystatechange, 无 onload / onerror
     成功和失败的含义同上
 
-  IE9:
-    Firefox 的行为 + IE6-8 的行为
-
-  Opera:
-    下载成功时触发 onload 和 onreadystatechange, 其他情况不触发任何事件
-    下载成功指文件内容非空，且无语法错误
-
   最佳选择：
-    在 Firefox, Chrome, Safari, IE9 下，用 onload 和 onerror
+    在 Firefox, Chrome, Safari, Opera, IE9 下，用 onload + onerror
     在 IE6-8 下，用 onreadystatechange
-    在 Opera 下，成功时用 onload, 失败时用 setTimeout
 
 
 css:
 
-  Firefox, Chrome, Safari:
-    无论下载成功还是失败，都不会触发任何事件
-
-  Opera:
-    下载成功时触发 onload 和 onreadystatechange, 其他情况不触发任何事件
-    下载成功指文件内容无语法错误，可以为空
+  Firefox, Chrome:
+    同 js
 
   IE6-8:
     下载成功和失败时都会触发 onload 和 onreadystatechange, 无 onerror
@@ -52,26 +43,36 @@ <h2>Summary</h2>
     同 IE6-8
     onreadystatechange 会重复触发
 
+  Opera:
+    同 js
+    但 css 404 时，不会触发 onerror
+
+  Safari:
+    无论下载成功还是失败，都不会触发任何事件
+
   最佳选择：
-    在 IE6-9 和 Opera 下，用 onload
-    其他浏览器下，<a href="css-preload.html">css-preload.html</a>
+    非 Safari 下，用 onload + onerror + onreadystatechange
+    Safari 和 Old Firefox 下，<a href="css-preload.html">css-preload.html</a>
+
+  风险点：
+    Opera 下如果 404，没有任何事件触发，有可能导致依赖该 css 的模块一直处于等待状态
 
 
 测试环境：
 
-  Firefox: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:8.0) Gecko/20100101 Firefox/8.0
-  Chrome: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.120 Safari/535.2
-  Safari: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.51.22 (KHTML, like Gecko) Version/5.1.1 Safari/534.51.22
-  Opera: Opera/9.80 (Macintosh; Intel Mac OS X 10.7.2; U; en) Presto/2.9.168 Version/11.52
+  Chrome: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5
+  Firefox: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:13.0) Gecko/20100101 Firefox/13.0
+  Safari: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
+  Opera: Opera/9.80 (Macintosh; Intel Mac OS X 10.7.4; U; en) Presto/2.10.289 Version/12.00
 
   IE9: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
-  IE6-8: IE9 下的兼容模式
+  IE6-8: 原生 IE
 
 
 注意事项：请将相关文件都下载到本地的 php 环境下再测试。
 
 
-最后更新时间：2011-05-02
+最后更新时间：2012-06-27
 
 
 参考文档：
@@ -88,73 +89,73 @@ <h2>Summary</h2>
 <script>
 
   // test cases
-  var head = document.getElementsByTagName('head')[0];
-  var timestamp = new Date().getTime();
+  var head = document.getElementsByTagName('head')[0]
+  var timestamp = new Date().getTime()
 
-  print(navigator.userAgent);
+  print(navigator.userAgent)
 
-  getScript('ok.js');
-  getScript('empty.js');
-  getScript('not-existed.js');
-  getScript('http://taobao.com/syntax-error.js');
+  getScript('ok.js')
+  getScript('empty.js')
+  getScript('not-existed.js')
+  getScript('syntax-error.js')
 
-  getStyle('ok.css');
-  getStyle('empty.css');
-  getStyle('not-existed.css');
-  getStyle('http://taobao.com/syntax-error.css');
+  getStyle('ok.css')
+  getStyle('empty.css')
+  getStyle('not-existed.css')
+  getStyle('syntax-error.css')
 
 
   function getScript(url) {
-    var s = document.createElement('script');
+    var s = document.createElement('script')
 
     s.onload = function() {
-      print('script onload is fired. ' + url);
-    };
+      print('script onload is fired. ' + url)
+    }
 
     s.onerror = function() {
-      print('script onerror is fired. ' + url);
-    };
+      print('script onerror is fired. ' + url)
+    }
 
     s.onreadystatechange = function() {
       if (s.readyState === 'loaded' || s.readyState === 'complete') {
-        print('script.readyState = ' + s.readyState + ' ' + url);
+        print('script.readyState = ' + s.readyState + ' ' + url)
       }
-    };
+    }
 
-    s.src = url;// + '?' + timestamp;
-    head.appendChild(s);
+    s.src = url + '?' + timestamp
+    head.appendChild(s)
   }
 
 
   function getStyle(url) {
-    var s = document.createElement('link');
-    s.rel = 'stylesheet';
+    var s = document.createElement('link')
+    s.rel = 'stylesheet'
 
     s.onload = function() {
-      print('style onload is fired. ' + url);
-    };
+      print('style onload is fired. ' + url)
+    }
 
     s.onerror = function() {
-      print('style onerror is fired. ' + url);
-    };
+      print('style onerror is fired. ' + url)
+    }
 
     s.onreadystatechange = function() {
       if (s.readyState === 'loaded' || s.readyState === 'complete') {
-        print('style.readyState = ' + s.readyState + ' ' + url);
+        print('style.readyState = ' + s.readyState + ' ' + url)
       }
-    };
+    }
 
-    s.href = url + '?' + timestamp;
-    head.appendChild(s);
+    s.href = url + '?' + timestamp
+    head.appendChild(s)
   }
 
+
   function print(msg) {
-    var p = document.createElement('P');
-    p.appendChild(document.createTextNode(msg));
-    document.getElementById('out').appendChild(p);
+    var p = document.createElement('P')
+    p.appendChild(document.createTextNode(msg))
+    document.getElementById('out').appendChild(p)
   }
 
 </script>
-
 </body>
 </html>