yepnope.js – 异步加载资源文件

yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css。 典型代码示例 yepnope({ test : Modernizr.geolocation, yep : ‘normal.js’, nope : [‘polyfill.js’, ‘wrapper.js’] }); 当Modernizr.geolocation为真时,加载yep项也就是”normal.js”,否则加载nope项——可以同时加载多个文件。 yepnope和现有的xxx script loader有什么区别? 个人认为主要 是这两点: 可以同时处理javascript以及css 能够按条件加载 yepnope的全部参数 yepnope([{ test : /* boolean(ish) – 你要检查真伪的表达式 */, yep : /* array (of strings) | string – test为true时加载这项 */, nope : /* array (of strings) | string – test为false时加载这项 */, both : […]

推荐一下Firefox插件Stylish

Stylish是这样一个firefox插件,你可以利用它来定制目标网页或网站的css样式,甚至一些firefox app的样式,让浏览效果更加舒适。而且在UserStyles网站上已经有不少现成的样式可供下载,让不会写css的普通用户也可以享受到它的便利。 其实Stylish和greasemonkey正好是一对,一个改变css,一个改变javascript。之前我写了一个用来看新浪新闻的greasemonkey脚本,这个脚本的大概原理是删除了新浪新闻页面上的右侧边栏,这样浏览的范围会更加宽一些,但是greasemonkey脚本会有这样一个缺点,它必须等到页面load完成之后,才开始生效,这样看上去会比较突兀,洋人对这个等待load的时间有个专有名词——flicker(这个词可不是指的图片网站flickr哦)。 使用Stylish就可以有效避免flicker,它在页面最开始载入时就是生效的,也不会有greasemonkey产生的突兀效果了。比如我用来看新浪新闻的样式是这样的: @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url-prefix(“http://news.sina.com.cn/”) { td.lc_blue {width:100%!important; font-size:1.2em;} div.rightShell {display:none} } 这个css除了把侧边广告隐藏以外,还把新闻的字体调大,像我这样的近视眼就可以看的比较轻松了。其中的-moz-document关键字是消除flicker的关键: The @-moz-document rule is a Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document. It is designed primarily for user style sheets. 所以要想写出避免flicker发生的greasemonkey脚本,最好是加上Stylish支持,用-moz-document()来隐藏会变化的html部分,待到页面载入完成之后,greasemonkey脚本就可以不慌不忙的处理后续事宜了。

在页面中动态载入外部javascript

有时候需要在网页中某个div载入之后,动态引入一段javascript,IE下的解决方案: newjs.onreadystatechange = function () { if (newjs.readyState == ‘loaded’) { // ready! } } newjs.onload = function () { // ready! } 主要利用了onload以及onreadystatechange事件。把这个加以利用,也能动态载入外部css。下面是同时适合Ie/firefox的写法。