1 (Page 1 of 1)
Jan 05, 2008
window.onload 的问题

随着ajax的流行，页面中的JS代码越来越多。一般我们用JS处理页面时，都是使用window.onload等到页面加载完毕后再来处理，否则有时会出现文档未加载完毕而报的错误了。

但window.onload有一个不好的地方，它会等到整个页面（包括图片，flash等）全部加载完毕后，才会执行。一个页面中如果有很多图片，中间会有较长的延迟才会去执行我们的代码。

具体效果：http://www.ajaxeye.com/labs/domready.htm（注意页面中的两个小方块颜色，一开始默认都是红色，注意颜色的改变）

上面页面中，会在DOM树加载完毕后和window.onload时分别改变两个小方块的颜色为绿色。

解决方法可以参见英文原文：
http://dean.edwards.name/weblog/2005/09/busted/
http://dean.edwards.name/weblog/2006/06/again/

解决方法就是想办法监听DOM树加载完毕的事件，等DOM树载完毕后执行我们的代码

  • Firefox、Opera9下，可以监听DOMContentLoaded事件来处理
  • IE下，可以给script标签加defer来处理

偶这个是从mootools，prototype中抠出来的IE，Firefox下测试通过

  1. Event.addDOMReadyEvent = function($callback) {   
  2.     var timer, fired = false;   
  3.        
  4.     function fireDOMReadyEvent() {   
  5.         if (fired) {   
  6.             return;   
  7.         }   
  8.         if (timer) {   
  9.             window.clearInterval(timer);   
  10.         }   
  11.         fired = true;   
  12.         $callback();   
  13.     }   
  14.        
  15.     // firefox, opera, safari ...    
  16.     if (document.addEventListener) {   
  17.         if (window.webkit) {   
  18.             timer = window.setInterval(function() {   
  19.                 if (/loaded|complete/.test(document.readyState)) {   
  20.                     fireDOMReadyEvent();   
  21.                 }   
  22.             }, 10);   
  23.                
  24.             Event.addEvent(window, 'load', fireDOMReadyEvent);   
  25.         } else {   
  26.             // firefox, opera9 使用 DOMContentLoaded   
  27.             document.addEventListener("DOMContentLoaded", fireDOMReadyEvent, false);   
  28.         }   
  29.     } else {   
  30.         // Internet Explorer中使用 defer 属性   
  31.         var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)';   
  32.         document.write('<SCRIPT id=__tbOnDOMReady src="' + src + '" defer><\/script>');   
  33.         $('__tbOnDOMReady').onreadystatechange = function() {   
  34.             if (this.readyState == 'complete') {   
  35.                 this.onreadystatechange = null;   
  36.                 fireDOMReadyEvent();   
  37.             }   
  38.         };   
  39.     }   
  40. }  
Posted by hee at 22:01 PM | | 评论(2)
Mar 25, 2007
html dom设置自定义需用setAttribute引起的问题

有文章说html dom中设置自定义属性时,需要使用setAttribute来设置.
但在某些情况下,不能全使用setAttribute来设置值
比如:

// 设置自定义属性
element.setAttribute("attribute.name", "attribute.value");
// 取得自定义属性
var value = element.setAttribute("attribute.name", "attribute.value");
alert(value);

在setAttribute属性值为字符串时,IE6,Firefox2,opera9下都工作正常.
而setAttribute当属性值为对象时,用上面的方法,只有IE下能工作正常.
比如:

// 设置自定义属性
element.setAttribute("attribute.name", object);
// 取得自定义属性
var obj = element.getAttribute("attribute.name");
// IE下返回的类型是object,而Firefox,opera下返回的类型却是string
alert(typeof obj);

解决的办法可以在设置自定义属性时,像设置内置属性一样操作

// 设置自定义属性
element.attribute = object;
// 取得自定义属性
var obj = element.getAttribute("attribute");
// 这样IE,Firefox,opera下都工作正常了
alert(typeof obj);

 

Posted by hee at 14:03 PM | | 评论(0)
Mar 15, 2007
(dp.SyntaxHighlighter)JS源代码加亮脚本

dp.SyntaxHighlighter一款基于js的客户端源代码加亮脚本。
支持大多数编程语言，如:css,c#,c++,vb,delphi,js,php,ruby,sql,html等等。
目前这个blog的源代码加亮功能就是使用dp.SyntaxHighlighter，感觉效果比较清爽。
其它的还有基于PHP的GeSHi

dp.SyntaxHighlighter的使用方法较简单，在需要进行源代码加亮的页面头部、尾部分别导入下面代码：

  1. <!-- 在头部导入css样式表 -->  
  2. <LINK href="SyntaxHighlighter.css" type=text/css rel=stylesheet></LINK>  
  3. <SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shCore.js"></SCRIPT>  
  4. <SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shBrushJava.js"></SCRIPT>  
  5. <SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shBrushJScript.js"></SCRIPT>  
  6. <SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shBrushPhp.js"></SCRIPT>  
  7. <SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shBrushXml.js"></SCRIPT>  
  8. <SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shBrushCss.js"></SCRIPT>  
  9.   
  10. <!-- name属性的值在下面的js方法中的参数 -->
  11. <!-- class属性的表示源代码的种类，这里是javascript -->
  12. <TEXTAREA class=javascript name=code rows=10 cols=60>
  13. function msg() {   
  14.         alert("hello world!");   
  15.     }   
  16. </pre></TEXTAREA>  
Posted by hee at 17:03 PM | | 评论(0)
Dec 30, 2006
corss browser (last update: 2006-12-29)

这里说的跨浏览器主要指的是IE及Firefox

首先推荐使用或阅读Prototype.js，其中解决了很多IE及firefox下的兼容问题。

然后就是“Javascript的IE和Firefox兼容性汇编”这篇文章。

这里主要记录是一些本人碰到，而上面又没有涉及的问题

  • IE中iframe的onreadystatechange方法，在firefox下没有这个方法，可以用onload来代替。
  1. if (typeof(domFrame.onreadystatechange) != "undefined") {      
  2.     // ie      
  3.     domFrame.onreadystatechange = notify;      
  4. } else {      
  5.     // firefox      
  6.     domFrame.onload = notify;      
  7. }      
  8.      
  9. function notify() {      
  10.     alert('iframe内容装载完成');      
  11. }    
  • firefox下在iframe中的页面内嵌在别的页面中，onload后，取不到clientHeight,clientWidth这些值

像上面那个例子，假如在B页面中写onload事件回调方法，在方法中取clientHeight,clientWidth返回值将不正确。
解决方法可以在A页面中来取值或设置

  1. // A页面     
  2. // 将返回B页面的clentWidth, clientHeight     
  3. domFrame.contentWindow.document.body.clientWidth;     
  4. domFrame.contentWindow.document.body.clientHeight;    
  • IE中取元素的颜色值可以使用element.currentStyle.color，firefox下没有currentStyle。可以使用下面方法来代替：
  1. function getCurrentStyle(, ) {   
  2.         if (.currentStyle) {   
  3.             return .currentStyle[];   
  4.         } else if (window.getComputedStyle) {   
  5.              = .replace(/([A-Z])/g, "-$1");   
  6.              = .toLowerCase();   
  7.             return window.getComputedStyle(, "").getPropertyValue();   
  8.         }   
  9.         return null;   
  10.     }  
Posted by hee at 09:12 AM | | 评论(0)
1 (Page 1 of 1)