编辑正在浏览的html页面（定制自己的IE）

        笔者比较喜欢使用网络查看资料，并且在阅读资料时候又一个做标记的习惯；但是浏览器上的文章大多是只读的，不能做标记，然后笔者就想能不能给IE写一个插件完成这个功能，在查询资料后，笔者发现一个比写插件更简单的方法：就是用javascript编写一个IE的右键。用javascript的脚本向正在浏览的页面上插入一些javascript脚本，然后这些脚本就可以实现添加标记的功能。

       编写过程：

       （1）注册IE右键的javascript脚本文件

                 编写reg文件内容如下：

REGEDIT4

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\ChangeWorld(&W)]
@="c:\\MyWorld\\ChangeWorld.html"
"Contexts"=dword:00000001

 

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\SaveMyWorld(&Z)]
@="c:\\MyWorld\\SaveMyWorld.html"
"Contexts"=dword:00000001

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\SaveInkOfMyWorld(&I)]
@="c:\\MyWorld\\SaveInkOfMyWorld.html"
"Contexts"=dword:00000001

 

      （2）编写javascript文件，一共3个html文件，每个文件只包括一个标签<script LANGUAGE="JavaScript" defer></script>，在编写脚本时，当前浏览页面的内容靠下面的代码获取：

var doc = external.menuArguments.document;
var srcevent = external.menuArguments.event;
var obody=doc.body;

      获取doc和obody后你就可以对页面进行插入的操作了，下面是向页面插入工具箱的操作：

 

var mytools = doc
			.createElement("<div id='mytools' onMouseDown='startDrag(this)' onMouseMove='draging(this)' onMouseUp='stopDrag(this)' style='z-index:99999;border:3px solid red;background-color:green;position:fixed;_position:absolute;z-index:1000;width:150px;top:10px;left:10px;padding:4px'>");
	mytools.innerHTML = "<fieldset style='width:140px;'><legend>工具箱：</legend><form style='text-align:left'>"
			+ "<input type='radio' name='mytool' value='none' checked='checked' οnclick='selectNoUtility()'>无</input>"+"<br/>"//mypalette的鼠标函数阻碍了原页面的文本框等默认动作
			+ "<input type='radio' name='mytool' value='line' οnclick='selectUtility(this.value)'>横线</input>"
			+ "<input type='radio' name='mytool' value='rect' οnclick='selectUtility(this.value)'>矩形</input>"+"<br/>"
			+ "<input type='radio' name='mytool' value='note' οnclick='selectUtility(this.value)'>注释</input>"
			+ "<input type='radio' name='mytool' value='anchor' οnclick='selectUtility(this.value)'>锚点</input>"+"<br/>"
			+ "<input type='button' name='mytool' value='高亮' οnclick='signWorld()' onMouseDown='event.cancelBubble=true;' onMouseMove='event.cancelBubble=true;' onMouseUp='event.cancelBubble=true;'></input>"
			+ "<input type='button' name='mytool' value='百度' οnclick='BdSearch()'  onMouseDown='event.cancelBubble=true;' onMouseMove='event.cancelBubble=true;' onMouseUp='event.cancelBubble=true;'></input>"+"<br/>"
			+ "<input type='button' name='mytool' value='英—>汉' οnclick='EnToZh()'  onMouseDown='event.cancelBubble=true;' onMouseMove='event.cancelBubble=true;' onMouseUp='event.cancelBubble=true;'></input>"
			+ "<input type='button' name='mytool' value='汉->英' οnclick='ZhToEn()'  onMouseDown='event.cancelBubble=true;' onMouseMove='event.cancelBubble=true;' onMouseUp='event.cancelBubble=true;'></input>"
			+ "</form></fieldset>";
	obody.appendChild(mytools);

 

      下面是向正在浏览的页面插入一段脚本的代码：

//为 工具箱和目录添加拖动
	var mydrag = doc.createElement("<script language='javascript'>");
	mydrag.text =
	 "var isdrag = false;"
	+"var x = 0;"
	+"var y = 0;"
	+"var oldCursor;"
	+"function startDrag(obj) {"
		+"if (event.button == 1) {"
			+"obj.setCapture();"
			+"x = event.clientX - parseInt(obj.style.left);"
			+"y = event.clientY - parseInt(obj.style.top);"
			+"isdrag = true;"
			+"window.event.cancelBubble=true;"
			+"oldCursor=obj.style.cursor;"
			+"obj.style.cursor='move';"
		+"}"
	+"}"
	+"function draging(obj) {"
		+"if (true === isdrag) {"
		  	+"obj.style.left = event.clientX - x;"
			+"obj.style.top  = event.clientY - y;"
			+"window.event.cancelBubble=true;"
		+"}"
	+"}"
	+"function stopDrag(obj) {"
		+"if (true == isdrag) {"
			+"obj.releaseCapture();"
			+"isdrag = false;"
			+"window.event.cancelBubble=true;"
			+"obj.style.cursor=oldCursor;"
		+"}"
	+"}";
	obody.appendChild(mydrag);

       笔者最终的目标是浏览页面时就像在本地使用pdf阅读器一样，但是能力有限，最终完成了一个实验版本，基本实现了划横线矩阵、注释和锚点的功能，但是不是对所以的网页都可行（这一点笔者始终不明白是怎么回事，希望N人指点）。

      程序（《我的页面我做主》）已经上传了，有兴趣的人可以看看，最好有高手给完善一下，指点一下。