一点笔记

　　什么是bookmarklet?
　　浏览器可以让一个有效的URL作为bookmark，一个JavaScript程序也有一个有效的URL,因此可以被作为一个 bookmark。可以将JavaScript程序做为一个URL加入象地址一样加入书签，这种JavaScript程序称作"Bookmarklet".

　　下面我推荐几个非常实用的适合“网页开发者”(说是给网页开发者用的，其实也就是方便查看源码罢了)的bookmarklets:

1.List Classes

javascript:(function(){var a={},b=[],i,e,c,k,d,s="<table border=1><thead><tr><th>#</th><th>Tag</th><th>className</th></tr></thead>";for(i=0;e=document.getElementsByTagName("*")[i];++i)if(c=e.className){k=e.tagName+"."+c;a[k]=a[k]?a[k]+1:1;}for(k in a)b.push([k,a[k]]);b.sort();for(i in b) s+="<tr><td>"+b[i][1]+"</td><td>"+b[i][0].split(".").join("</td><td>")+"</td></tr>";s+="</table>";d=open().document;d.write(s);d.close();})()

　　顾名思义，用于列出页面中的classes，用CSS过滤广告时经常用。

2.View Scripts

javascript:s=document.getElementsByTagName('SCRIPT'); d=window.open().document; /*140681*/d.open();d.close(); b=d.body; function trim(s){return s.replace(/^\s*\n/, '').replace(/\s*$/, ''); }; function add(h){b.appendChild(h);} function makeTag(t){return document.createElement(t);} function makeText(tag,text){t=makeTag(tag);t.appendChild(document.createTextNode(text)); return t;} add(makeText('style', 'iframe{width:100Qeight:18em;border:1px solid;')); add(makeText('h3', d.title='Scripts in ' + location.href)); for(i=0; i<s.length; ++i) { if (s[i].src) { add(makeText('h4','script src="' + s[i].src + '"')); iframe=makeTag('iframe'); iframe.src=s[i].src; add(iframe); } else { add(makeText('h4','Inline script')); add(makeText('pre', trim(s[i].innerHTML))); } } void 0

　　在一个新窗口中列出该页面使用的Scripts，这个功能非常强大，将Scripts分类显示为Inline script和script src="*.js"，对于后者则在框架中显示js文件内容。
　　这个的用处就非常广了，比如分析页面所使用的js特效，再比如找出广告所使用的js文件，比看源码直观多了。

3.View Style Sheets

javascript:s=document.getElementsByTagName('STYLE'); ex=document.getElementsByTagName('LINK'); d=window.open().document; /*set base href*/d.open();d.close(); b=d.body; function trim(s){return s.replace(/^\s*\n/, '').replace(/\s*$/, ''); }; function iff(a,b,c){return b?a+b+c:'';}function add(h){b.appendChild(h);} function makeTag(t){return document.createElement(t);} function makeText(tag,text){t=makeTag(tag);t.appendChild(document.createTextNode(text)); return t;} add(makeText('style', 'iframe{width:100%;height:18em;border:1px solid;')); add(makeText('h3', d.title='Style sheets in ' + location.href)); for(i=0; i<s.length; ++i) { add(makeText('h4','Inline style sheet'  + iff(' title="',s[i].title,'"'))); add(makeText('pre', trim(s[i].innerHTML))); } for (i=0; i<ex.length; ++i) { rs=ex[i].rel.split(' '); for(j=0;j<rs.length;++j) if (rs[j].toLowerCase()=='stylesheet') { add(makeText('h4','link rel="' + ex[i].rel + '" href="' + ex[i].href + '"' + iff(' title="',ex[i].title,'"'))); iframe=makeTag('iframe'); iframe.src=ex[i].href; add(iframe); break; } } void 0

　　这个功能基本同上，只不过不是显示Scripts而是显示Style Sheets了。

4.Disables all style sheets

javascript:(function(){var i,x;for(i=0;x=document.styleSheets[i];++i)x.disabled=true;})();

　　禁用所有style sheets。

5.View Computed Styles (hover+click)

javascript:if(typeof keySV=='undefined'||!keySV){keySV=true;var lines=0;var styleProp=[['background-attachment','scroll'],['background-color','transparent'],['background-image','none'],['background-position','0px 0px'],['background-repeat','repeat'],['border-collapse','separate'],['border-top','0px'],['border-right','0px'],['border-bottom','0px'],['border-left','0px'],['bottom','16px'],['caption-side','top'],['clear','none'],['clip','rect(0px,0px,0px,0px)'],['color','rgb(0,0,0)'],['content','none'],['counter-increment','none'],['counter-reset','none'],['cursor','default'],['direction','ltr'],['display','xx'],['elevation','undefined'],['empty-cells','hide'],['float','none'],['font-family','Times New Roman'],['font-size','16px'],['font-style','normal'],['font-variant','normal'],['font-weight','400'],['height','16px'],['left','0px'],['letter-spacing','0px'],['line-height','normal'],['list-style-image','none'],['list-style-position','outside'],['list-style-type','disc'],['margin-top','0px'],['margin-right','0px'],['margin-bottom','0px'],['margin-left','0px'],['max-height','0px'],['max-width','0px'],['min-height','0px'],['min-width','0px'],['overflow','visible'],['padding-top','0px'],['padding-right','0px'],['padding-bottom','0px'],['padding-left','0px'],['position','static'],['quotes','none'],['right','0px'],['table-layout','auto'],['text-align','left'],['text-decoration','none'],['text-indent','0px'],['text-transform','none'],['top','0px'],['unicode-bidi','normal'],['vertical-align','baseline'],['visibility','visible'],['white-space','normal'],['width','0px'],['word-spacing','0px'],['z-index','auto']];function getStylesEle(ele){lines=0;var output='<b>'+ele.nodeName+'</b>
';if(ele.id) output+='id: '+ele.id+'
';if(ele.className) output+='class: '+ele.className+'
';for(i=0;i<styleProp.length;i++) {var temp=window.getComputedStyle(ele,null).getPropertyValue(styleProp[i][0]);if(temp){if(temp.indexOf(styleProp[i][1])==-1) {lines++;output+=styleProp[i][0]+' : '+temp+'
';}}}return output;}function openDataWindow (string) { void(window.open('data:text/plain;charset=utf-8,'+escape(string),'','height=360,width=750'))}function closeViewer (){document.getElementById('output').removeNode(true);curEle.style.backgroundColor='';keySV=false;}var curEle=document.body;var outPut='',Style='';var bodyColor=window.getComputedStyle(document.body,null).getPropertyValue('background-color');(function () {var outPut=document.createElement('div');outPut.id='output';Style=outPut.style;Style.position='absolute';Style.width='270px';Style.fontSize='11px';Style.lineHeight='18px';Style.fontFamily='sans-serif';Style.backgroundColor='#eee';Style.padding='7px';Style.border='1px solid #888';Style.color='#000';Style.textAlign='left';Style.zIndex='10000';document.body.insertBefore(outPut,document.body.firstChild);document.onmousemove=function () {if(keySV){Style.height=((lines+4)*18)+'px';if(event.x/window.innerWidth < 0.5){Style.left=pageXOffset+event.x+28;}else {Style.left=pageXOffset+event.x-298};if(event.y/window.innerHeight < 0.5){Style.top=pageYOffset+event.y+28;}else {Style.top=pageYOffset+event.y-((lines+4)*18+28)};if(event.srcElement!=curEle){document.getElementById('output').innerHTML=getStylesEle(event.srcElement);if( curEle.id!='output' ) curEle.style.backgroundColor='';curEle=event.srcElement;document.body.style.backgroundColor='#ccc';if( curEle.id!='output' && curEle.nodeName!='HTML' && curEle.nodeName!='BODY' ) curEle.style.backgroundColor='#ff5';}document.body.style.backgroundColor=bodyColor;}};document.onkeydown=function (){if(keySV)closeViewer ();};document.onclick=function () { if(keySV){openDataWindow ( event.srcElement.outerHTML.replace(/STYLE=.background-color\: rgb.255,255,0../i,'').replace(/(<[HPDUMLSTAFI])/gi,'\n$1').replace(/^\n/,'') );return false;}};})()}else{closeViewer ()}

　　可以直观地使用鼠标来查看Computed Styles,有了这个用CSS过滤广告时就轻松多了，轻轻用鼠标一移就可以得到class,id，再一点就可以得到选中区域的源代码，这样的bookmartlet辅助CSS过滤广告再方便不过了，简直赶得上Opera默认的"Blocked content"了。
　　说到这个bookmartlet我又想到了另一个userjs： View selection source，可以查看选中部分的源代码，同样是过滤广告时的好工具。

6.Dynamically Add Styles

javascript:var isXHTML=/html\:/.test(document.getElementsByTagName('body')[0].nodeName);function createNewEle(ele){   if(isXHTML) { return document.createElementNS('http://www.w3.org/1999/xhtml', ele); }   else { return document.createElement(ele); };};function setStyle(string) {var ele=createNewEle('link');ele.rel='stylesheet';ele.type='text/css';ele.href='data:text/css;charset=utf-8,'+escape(string);document.getElementsByTagName('head')[0].appendChild(ele);}(function (){var c=window.open('','','height=400,width='+window.innerWidth*.5+',top='+(window.innerHeight-(400+10))+',left='+(window.innerWidth*.5-30)+',resizable=yes,location=no');c.document.open();c.document.write(''+'<!DOCTYPE html PUBLIC \u0022-//W3C//DTD XHTML 1.0 Transitional//EN\u0022 \u0022http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\u0022>'+'<html xmlns=\u0022http://www.w3.org/1999/xhtml\u0022>'+'<head><head><title>css console '+document.title+'</title><style type=\\u0022text/css\\u0022>'+'html {min-height:100\u0025;}'+'body{font: 12px \u0022Lucida sans unicode\u0022;padding:0;margin:0;'+'line-height:18px;'+'background:#eee;}'+'#content {padding:3px 10px 50px 10px;}'+'textarea{width:100\u0025;height:200px;}'+'#control{display:block;position:absolute;left:0;padding:0;bottom:0;width:100\u0025;}'+'#control p {padding:10px;height:25px;}'+'input{float:right;margin:0 2px;font:12px \u0022Lucida sans unicode\u0022;max-width:96px;}'+'input[value~=\u0022go\u0022] {float:left}'+'a{text-decoration:none;color:#000;padding:0 5px}'+'a:hover{background:#fff}'+'h3{margin:7px 0px;}'+'h3:first-child+div{padding-bottom:7px;}'+'</style>'+'<script type=\'text/javascript\'>'+'function setCSS(){'+'document.getElementById(\'done\').innerHTML+=\'> \'+document.getElementById(\'text9\').value.replace(/\\n/g,\'
&nbsp;&nbsp;&nbsp;\')+\'
\';'+'opener.setStyle(document.getElementById(\'text9\').value)'+'}'+'</script></head><body><div id=\'content\'>'+'<h3>history:</h3><div id=\'done\'></div><textarea id=\'text9\' >* {background:#EEE!important;}</textarea>'+'</div><div id=\'control\' ><p>'+'<input type=\'button\' value=\'go !\' onclick=\'setCSS()\' />'+'<input type=\'button\' value=\'close\' onclick=\'close()\'; />'+'<input type=\'button\' value=\'clear history\' onclick=document.getElementById(\'done\').innerHTML=\'\'; />'+'<input type=\'button\' value=\'clear input\' onclick=document.getElementById(\'text9\').value=\'\'; />'+'</p></div></body></html>');c.document.close();})()

　　给页面添加你自己的Styles，也就是你自己写一句CSS代码，然后在当前页面载入。
　　这个同样在用CSS过滤广告时发挥很大作用，可以很快的检测你写的过滤代码有没有效果或者有无副作用。

其实给网页开发者用的Bookmarklets还有很多，但咱普通人也就用的上这几个，多了也用不上。
更多bookmarklets看这里：
http://www.subsimple.com/bookmarklets/collection.asp
http://www.bookmarklets.com/tools/categor.html
http://www.squarefree.com/bookmarklets/zap.html
http://fiag.blogchina.com/563420.html
http://my.opera.com/forums/showthread.php?s=321683ad7e939ef781e40601007f6364&threadid=31059
http://www.blummy.com/
http://www.micropersuasion.com/2005/10/bookmarklets_ev.html

486时代的游戏了,难度大但很好玩,不多做介绍了.
此版为智冠制作,并非所谓的曹操传修改版
上张截图:

下载:
岳飞传安装程序
所有关卡的通关记录