JerryQu的小站

今天firefox4正式版提前泄漏，标志着几大浏览器又一次更新换代总算完成。除了更现代的UI，更快的性能，更好的标准支持度外，还有些好玩的东西。

首先是IE9的跳转列表（jump list）。这本来是win7提供给传统应用程序用的，可以让用户快速完成一些任务。现在网页也可以用，在页头定义这些格式的meta信息用IE9打开就行：

<meta content="网站名称" name="application-name" />
<meta content="name=任务名;action-uri=对应链接;icon-uri=icon图片" name="msapplication-task" />
... ...
<meta name="msapplication-navbutton-color" content="black"/>

我的博客也加上了这个功能，效果就是右边那样，对应的代码可以查看源文件。如果给每个任务单独设计icon可能要好看一些。

IE9在处理pinned网页与普通网页相比有不少变化，前者看起来更像一个app。前进后退按钮的颜色是根据favicon自动算的，也可以由页面来指定，相关细节可以查看这篇文章。

其他浏览器想要支持这个功能其实并不难，就看浏览器厂商愿不愿意了。还有人写了个Chrome插件，可以将网页jump list信息提出来以Chrome插件常见的形式来展现。

再说说出来没多久的Opera11.10。大家都知道Opera有个快速拨号的功能，现在各浏览器都拿过去用，Opera就是这样一直被模仿，一直在创新。新版Opera允许网站自定义这个快速拨号。

Read the rest of this entry »

前端开发中，经常需要动态的添加、移除或者获取元素的Attribute。也就是说经常会用到setAttribute、removeAttribute和getAttribute。今天要讨论的是开发中遇到的几处IE与Firefox对Attribute操作的差异。

属性名大小写

在Firefox中，属性没有小写的概念，就算属性名全用大写，Firefox也会解析成小写，用Firebug看就能看到。所以下面的代码在Firefox与IE中运行结果会不一样。

<div altStr="sss"></div>
<script type="text/javascript">
 var div = document.getElementsByTagName("div")[0];
 div.removeAttribute("altstr");
 alert(div.getAttribute("altstr"));//IE中返回sss,FF中返回null
</script>

不过在IE中，removeAttribute有第二个参数，设置为true表示不忽略大小写，为false时忽略大小写，默认值是true；Firefox中因为解析时就不存在大写属性了，所以就没有第二个参数。也就是说IE中removeAttribute(”test”,false)等同于Firefox中的removeAttribute(”test”)，IE中removeAttribute(”test”,true)在Firefox中无法实现。

Button的value属性

假设有下面一个button，怎么可以得到button的value属性？

<button value="a">b</button>

其实上，在IE下，无论是btn.getAttribute(”value”)、btn.value、btn.innerHTML还是btn.innerText都得”b”，但是在Firefox下，btn.getAttribute(”value”)、btn.value得到的都是”a”，btn.innerHTML得到的是”b”。也就是说我们如果要在button上加自定义属性，不要用”value”做属性名，否则在IE下没办法取到值。

getAttribute返回值类型不同

看一下下面的代码，你认为IE与Firefox分别会返回什么？

<button onclick="alert(0)">b</button>
<script type="text/javascript">
 var btn = document.getElementsByTagName("button")[0];
 alert(btn.getAttribute("onclick"));
</script>

IE下，getAttribute(”onclick”)返回的是一个function，直接可以调用，Firefox下则返回一个string，直接调用会出错。

题外话

今天翻手册，看到上面对Button标签是这么描述的：

当 BUTTON 元素在表单中提交的话，Microsoft^® Internet Explorer 5 及以后版本将提交 VALUE 标签属性，若存在的话。否则就提交 innerText 属性。在 Internet Explorer 4.0 中，只会提交 innerText 值。

但是我发现我的IE8对于form中的button，无论有没有value属性，都是提交button的innerHTML属性。不知道是什么回事。

扩展阅读：在IE下用getAttribute时要小心

本文链接：http://www.imququ.com/post/56.html

--EOF--