让火狐等浏览器也能使用HTC(HTML component)的方法

HTML组件(HTML conponent)是DTHML里的东西,相信现在大部分的web开发或者是网站都不使用DHTML了。它只能在IE下有直接的支持,它直接在样式表中用

behavior: url(htcfilename.htc);

来指示样式的行为使用的htc文件,IE支持behavior,但火狐不能支持。

如何让火狐等浏览器也支持htc呢,这里有个已实现的示例:

此方法来自http://dean.edwards.name/

它的示例http://dean.edwards.name/my/examples/moz-behaviors/

示例下载http://deanedwards.googlecode.com/svn/trunk/download/moz-behaviors.zip

下面以他的示例来解释下实现方法。

1.         IE下是在样式表中用behavior,那么火狐下有它自己专用的css,那就是用-moz-binding,最终css就是这样的:

/* 用于IE的 behaviors */
behavior: url(drag-box.htc);
/* 用于火狐的 behaviors */
-moz-binding: url(bindings.xml# drag-box.htc);

2.         发现css中有个bindings.xml文件全名,这个就是作者写的xml文件,其中主要是有两个地方是重要的,其他的可以不管它(除非你也需要)。

<!—此处最重要,意思就是用moz-behaviors.xml来提供对behavior的支持(moz-behaviors.xml中有解析htc文件的javascript代码)-->
<binding id="behavior" extends="moz-behaviors.xml#behavior"/>
<!—类似这些都是用来标识需要用到的htc文件的 -->
<binding id="test.htc" extends="#behavior"/>

3.         对于moz-behaviors.xml文件是用来提供对behavior的支持的,它里面有段代码是进行“优化”后的,看起来是加密的,显示乱码。你下载的示例中有这个文件的源文件moz-behaviors-source.xml,它在运行中是不需要的,但这个文件才是火狐下使用htc最关键的地方,下面把源码贴出来供大家学习。

moz-behaviors-source.xml

4.         htc文件中也要注意一个地方,那就是要使用<![CDATA[ ]]>javsscript代码括住,像下面这样。

复制代码
<script type="text/javascript">
//<![CDATA[
function beginDrag() {
    
if(true && true)
    {
    }
};
//]]>
</script>
复制代码


如果不用它括住会出现很搞笑的事情,true&&true这样的javascript代码会有错,当然浏览器不会提示错误,firebug也无法调试(因为htc中的javascript并不是直接调用该文件执行的,而是由moz-behaviors.xml文件中的javascript翻译后执行的,执行是由与css样式关联的DOM对象的js对象原型prototype进行的),所以像&这样的特殊字符会影响到moz-behaviors.xml文件中的javascript的翻译过程,同时一旦“有错”,htc文件中的任何javascript代码都无法执行,因为整个翻译过程已经被打乱了,我是这样通俗理解的。



转自:http://www.cnblogs.com/pains/archive/2009/12/06/1617874.html

阅读更多
换一批

没有更多推荐了,返回首页