unbelievable! 通过Css调用Js代码?

最新推荐文章于 2025-05-26 16:38:55 发布

weixin_33725270

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量201

点赞数

文章标签： javascript python xhtml ViewUI

原文链接：https://my.oschina.net/blogshi/blog/285955

版权

2019独角兽企业重金招聘Python工程师标准>>>

一直以来通过javascript操作css都是家常便饭,使用起来也没感觉什么特殊,如果反其道而行之呢?

用CSS写出Javascript代码或者说用CSS调用JS代码可行吗?

答案是可以的,从技术层面上是可以实现的,不过因为安全原因,限制也比较严重.所幸有所限制,不然估计要变得一团糟啊.目前比较可行的通过CSS执行Javascript的方式有以下几种.如果你还有其他方式,留言给我.

(1) 通过expression()

这种方式应该只在IE下才好使,可以书写如:

background: expression(JS code resulting in a vali background image string here)

body {

width: expression(document.body.clientWidth > 1100)? "1100px" : "auto";

}

这种方式也就是在CSS的属性值中嵌入JS代码,仅在IE下生效,并且是比较老版本的IE,到底有多老,请自行尝试,我只能说567...IE8下我没有测试,有兴趣的童鞋可以测试完留言给我.

(2) 通过url在CSS属性中注入

这种方式就是在比如设置background背景图片的时候,通过url('javascript:...')的方式将Javascript代码注入进去.

(3) HTC with IE

这个不是通过HTC手机实现...这种方式仅在IE下可行,通过CSS调用.htc文件来启用Javascript.

# CSS file

body {

behavior:url(script.htc);

}

# script.htc

<PUBLIC:COMPONENT TAGNAME="xss">

<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>

</PUBLIC:COMPONENT>

<SCRIPT>

function main()

{

alert("HTC script executed.");

}

</SCRIPT>

(4) XBL with Firefox

用法和上面HTC with IE类似,只不过仅支持Firefox浏览器.

body {

-moz-binding: url(script.xml#mycode);

}

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

<binding id="mycode">

<implementation>

<constructor>

alert("XBL script executed.");

</constructor>

</implementation>

</binding>

</bindings>