CSS裸奔节之强制脱衣

今天是CSS裸奔节,所谓CSS裸奔,就是把网站的所有css去掉,这样所有的显示格式什么的就都没有了,只剩下html实体显示出来,起源好像是比较无聊的想法,就是剥去css的外衣,让大家看看你的(x)html代码是否工整。

不过今天偶不打算裸奔,而是告诉大家一个可以看到任何网站裸奔形象的方法,参考我以前写的用js丰富你的书签功能,创建一个书签,也可以放到书签工具栏上,内容如下:

javascript:void((function(){var style=document.getElementsByTagName('style');for (i=0; i<style.length; i++)style.item(i).disabled=true;var link = document.getElementsByTagName('link');for (i=0; i<link.length; i++)if ('text/css' == link.item(i).type)link.item(i).disabled=true;var obj = document.getElementsByTagName('*');for (i=0; i<obj.length; i++){obj1 = obj.item(i);if (obj1.attributes.getNamedItem('style')){obj1.attributes.getNamedItem('style').value = '';}}})());

注意一定要是一行才行,作为书签地址就可以了,然后打开任何一个网站,点这个书签,是不是把css全部都脱掉了?懒人也可以直接把这个链接拖到工具栏上使用:

CSS裸奔

公布源代码如下,没有太复杂的地方,有了DOM说明,知道各个对象的方法和属性之后,把stylelink全部禁用,然后把inline的style=""的value全部设置为空串就可以了:

javascript:void((function(){
/* 用style方式引用的css */
var style=document.getElementsByTagName('style');
var s='Style:' + style.length;
for (i=0; i<style.length; i++)
{
    /*s += style.item(i) + '|';*/
    style.item(i).disabled=true;
}
/* 用link方式引用的css */
var link = document.getElementsByTagName('link');
s += 'Link:' + link.length;
for (i=0; i<link.length; i++)
    if ('text/css' == link.item(i).type)
        {
            /*s += link.item(i).href + "|\\n";*/
            link.item(i).disabled=true;
        }
/* 任意对象的style="" */
var obj = document.getElementsByTagName('body').item(0).childNodes;
var obj = document.getElementsByTagName('*');
s += 'Obj:' + obj.length;
for (i=0; i<obj.length; i++)
{   
    obj1 = obj.item(i);
    if (obj1.attributes.getNamedItem('style'))
    {
        s += obj1.nodeName + obj1.attributes.getNamedItem('style').value + "\\n";
        obj1.attributes.getNamedItem('style').value = "";
    }
}
/*alert(s);*/
})());

这个文件删除掉注释以后,可以用下面这个命令转换为一行:

cat css1.js |tr -d \\\\n |sed -r -e 's/$/\\n/' -e 's/\\t//g'

这样就得到了上面那段源代码。

javascript程序调试比较麻烦,以前我的方法是在vim中编辑,然后用命令转化为一行,再手工粘贴到书签的地址中,执行,然后有错误再回到编辑。不过今天发现一个好方法,其实也就是脑子转个弯儿的事,创建一个html文件,在里面把javascript代码调试好,然后再转换为可以用在书签中的形式。

另外Firefox2的Error Console虽然能够监测js错误,但是如果不小心点了上面的“Messages”,就会发现错误不显示了,需要再点“All”查看所有信息,今天为这是纳闷了半天,因为切换显示错误分类的时候没有任何征兆。

参考:

自己写js代替手工点击

有一些变态网页,会有一大堆radio或者checkbox让用户去点,或者有很多+要逐个展开,如果经常使用这样的功能,手工一个个的去点是很笨的做法,如果结合我原来介绍过的用js丰富你的书签功能,自己写点javascript就方便多啦。

例如,网页上有几百个+需要展开,而+部分的html代码如下:

<img src=”collapse.gif” title=”展开列表” style=”cursor:hand” onclick=”uf_Expand(this, ‘6’, ‘909.2500’)”>

其中onclick动作调用的uf_Expand就是实现展开的函数,于是,我们可以遍历所有的img对象,利用src=”collapse.gif”来辨别这是一个点击展开的“+”(如果能配合id来使用当然更好啦),然后调用它的onclick动作:

javascript: void( ( function() { var img=document.getElementsByTagName(“img”); var length=img.length; for (var i=0;i<length;i++) { obj=img[i]; if (“http://www.fwolf.com/collapse.gif”==obj.src) { obj.onclick(); } } } ) () );

注意img的src属性和html中看到的并不完全一样,加上了前面的域名部分,这是浏览器在解析html的时候自动加上的。现在只需我们轻轻点一下做好的书签按钮,就可以展开所有的+了。

还有一种情况,那就是两次展开之间需要一定的时间间隔,毕竟谁的服务器也无法承受一下子多出几百次请求,一般这种情况的解决都是写两个函数,一个为启动函数,使用setTimeout方法启动另外一个主体函数,主体函数在作完一次处理之后,再使用setTimeout调用自身。由于我们这里需要作的处理比较简单,所以也可以采取直接setTimeout,通过增加timeout时间的方式来实现。只需把上例代码中的“obj.onclick();”这一行更改为:

setTimeout(“document.getElementsByTagName(‘img’)[” + i + “].onclick()”, 3000*i);

就可以实现每隔3秒自动展开下一个“+”了。