Seateng Blog » Javascript

script 标签的onload事件

Seateng — Mon, 09 Nov 2009 10:13:31 +0000

下午解决个页面异步加载触发的问题记录如下。

需求：页面需要从js文件加载完数据后触发显示数据的函数。
Google之得解。

贴码如下:

var url      = "http://host_name/example.js";
var script  = document.createElement("script");
script.type= "text/javascript";
script.language="javascript";
script.src=url;
if(script.addEventListener){
	script.addEventListener("load", callback, false);
}else if(script.attachEvent){
	script.attachEvent("onreadystatechange", function(){var target = window.event.srcElement; if(target.readyState == "loaded") callback.call(target);});
}
document.getElementsByTagName("head")[0].appendChild(script);

function callback()
{
//TODO Show Data
}

备注: onreadystatechange 事件有两次触发一次是loading事件一次是loaded事件，loading事件应用无关，加判断区分之。

再Google之已经有老外做了个loadScript库解决类似问题地址如下：
http://design-noir.de/webdev/JS/loadScript/

IE8 3月20日正式发布

Seateng — Fri, 20 Mar 2009 10:37:38 +0000

IE8浏览器于北京时间3月20日零时正式发布。
各大媒体头版头条，争相介绍IE8的新特性。其中一个特性是IE8 增加了对W3C Selector API的支持，Javascript 增加了两个函数 querySelector() 和 querySelectorAll() 。听都都引用了这个例子：

<html>
  <body>
    <div><div><span>InnerSpan</span></div></div>
    <div><span class="myClass">ClassSpan</span></div>
    <script type="text/javascript">
      alert(document.querySelector("div div span").innerHTML);
      alert(document.querySelector("span.myClass").innerHTML);
    </script>
   </body>
</html>

当你真的把这段代码，Ctrl-C Ctrl-V运行的时候你会发现IE8直接提示JS错误。不是IE8已经支持querySelector()和querySelectorAll了吗？
原来IE8少了DOCTYPE定义就不认这两函数了。

Jquery的强大之处正是这种Selector的写法，如果各浏览器都能实现W3C Selector API，作为Javascript的一个基本特性，那么提高性能的同时也方便了Javascript的开发者。反过来Jquery如果整合了内建的Selector，到时候在支持W3C Selector API的浏览器上将如虎添翼，性能提高的同时还能省去一大部分核心代码。

根据Robert Biggs 在blog上发布的性能测试报告，我们可以看到 IE8内建的Selector性能比Jquery快了近100倍。

几个框架的测试结果如下：
全部Selector跑完
IE8: 924ms
Ext 2.0: 41823ms
Jquery 1.2.3: 97696ms
Prototype 1.6.0.2: 230289ms

注：IE8+ Firefox3.1+ Safari 3.1+都支持W3C Selector API。

另外IE8在向后兼容上也费尽心机。多了个兼容模式的按钮不说。
还可以通过在页面head上加个：

1	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

让IE8自动用IE7兼容模式解析。如果你的应用不想针对IE8调整，那么在你的页面上加上这段试试。

对于UE（User Experience）来说，新版本浏览器的发布最需要关心的莫过于兼容的问题，大部分的前端开发主要考虑IE6 IE7 Firefox 兼容，从IE8正式发布的那刻起IE8便加入了主要兼容行列。前端开发要兼容的浏览器越多，成本越大这是毋庸置疑的事实。浏览器之战爽了大家苦了UE Developer。。。

IE8兼容模式和兼容IE7的可以看IEBlog的上的这两篇文章:
Compatibility and IE8
Introducing IE=EmulateIE7

IE下javascript cookie path设置Bug

Seateng — Sun, 15 Mar 2009 08:39:56 +0000

手上一个广告项目，在Firefox下顺利测试通过。自信JS代码能兼容IE，FF测试过后随手就仍给CS测试，结果CS反馈说有问题。排查一番，发现居然和Javascript 设置 Cookie 时的 path 有关。IE下Cookie种在 /或者URL所在路径时正常，如果Cookie值作用域在当前URL下则IE下javascript 无法获取到设置的Cookie值。

看下面演示代码:

var cookie_name="name";
var cookie_value="value";
expires = new Date();
expires.setTime(expires.getTime() + 86400*1000);

//有Bug document.cookie无法独到cookie_name值
document.cookie = cookie_name + "=" + encodeURIComponent(cookie_value) +
                          "; expires=" +  expires.toGMTString() +
                          "; path=" + window.location.pathname;
//正常
document.cookie = cookie_name + "=" + encodeURIComponent(cookie_value) +
                          "; expires=" +  expires.toGMTString() +
                          "; path=/test/";
//正常
document.cookie = "cookie_name=" + encodeURIComponent(cookie_value) +
                          "; expires=" +  expires.toGMTString() +
                          "; path=/";

怀疑是IE的Bug、
在google上搜了下关键词: ie javascript cookie path bug
同样的问题在罪与罚的博客上也有描述，而且博主联系过微软IEBLOG的Eric。得到的回复是:

You have uncovered an IE bug where cookies that are set with a path that contains a filename (e.g. /page.htm) are not accessible to the document.cookie function, although they are correctly sent to the server in the HTTP header. This has been broken for at least 10 years and unfortunately probably will not be fixed in IE8.

Thanks,

-Eric

一个存在10年的Bug。。。而且IE8也不会修复，实在是无语。

需求是cookie值只对当前页面有效，没办法只好用替代方案，看代码：

//IE Cookie Bug 替代方案
var cookie_path  = window.location.pathname;
var cookie_name  = encodeURIComponent(cookie_path.substring(cookie_path.lastIndexOf('/')+1));
     cookie_path  = cookie_path.substring(0, cookie_path.lastIndexOf('/')+1);
var cookie_value = "value";
expires = new Date();
expires.setTime(expires.getTime() + 86400*1000);

document.cookie = cookie_name + "=" + encodeURIComponent(cookie_value) +
                          "; expires=" +  expires.toGMTString() +
                          "; path=" + cookie_path;

替代方案根据每个页面的URL文件名来做Cookie名，有效范围在当前页路经下。
如：url 等于 /test/test.html
则cookie名为test.html，有效路径为/test/
这样也可以做到同一个js部署在每个页面上能读到只对当前URL有效的cookie值。代价是当用户在同一级目录下访问很多页面时会导致cookie值不断增大。结果是当前路径下的每个http请求都带很长一段的cookie，直接导致服务器接收客户端request的header长度增长，流量增长的同时服务器负担也变重。而且根据 RFC 2109 的定义Cookie也有长度和个数限制，IE允许的最大 Cookie 长度是 4096 字节，允许50个 Cookie 名-值对。如果要突破50个名-值对的限制，可以在一个名-值使用Cookie字典的方式保存更多的Cookie变量。