存档
最近做了一些javascript相关的工作,把收获和大家分享一下,感谢下meizz,他的框架jsframework给我提供了许多现成的工具,本文转自yizhu2000的博客
title这个元素比较特殊
如果title中有经过htmlencode的字符，通过document.title获得的内容将会自动解码,并且在ie中通过给title加上一个id然后用document.getElementById(titleid).innerHTML来获得其中内容也仍然是已经解码的，而firefox则不会
<html>
<head>
<title id=”tt”> <iframe src="www.baidu.com"/> </title>
</head>
<body>
<div id=”dd”> <iframe src="www.baidu.com"/></div>
document.title:<input id=”disp1″ /><br />
document.getElementById(titleid):<input id=”disp2″ /><br/>
document.getElementbyId(divid):<input id=”disp3″ />
<script type=”text/javascript” >
document.getElementById(“disp1“).value=document.title;
document.getElementById(“disp2“).value=document.getElementById(“tt“).innerHTML;
document.getElementById(“disp3“).value=document.getElementById(“dd“).innerHTML;
</script>
</body>
</html>
ie中的结果
firefox的结果
xhtml不支持document.body.scrollTop
当为html文档加上如下头以支持xhtml过渡标准时候，使用document.body.scrollTop值始终为0
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-CN” lang=”zh-CN”>
这是document.body.scrollTop始终为0,这时需要用document.documentElement.scrollTop才能获得正确的值
而如果不加xhtml的申明,document.documentElement.scrollTop将为0
下面这个getScrollXY()方法可以包装这个变化
<html>
<body>
<div id=”dd”> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
scrollLeft:<input id=”disp1″ /><br />
scrollTop:<input id=”disp2″ /><br/>
<button onclick=”onClick()” >获得scrollXY</button>
<script type=”text/javascript” >
function getScrollXY(){
var x,y;
if(document.body.scrollTop){
x=document.body.scrollLeft;
y=document.body.scrollTop;
}
else{
x=document.documentElement.scrollLeft;
y=document.documentElement.scrollTop;
}
return {x:x,y:y};
}
function onClick(){
document.getElementById(“disp1“).value=getScrollXY().x;
document.getElementById(“disp2“).value=getScrollXY().y;
}
</script>
</body>
</html>
firefox的outerHTML
firefox没有outerHTML这个很有用的属性,用下面这个方法可以让你的firefox也具有这个属性
if(typeof(HTMLElement)!=“undefined“ && !window.opera){
HTMLElement.prototype.__defineGetter__(“outerHTML“,function()
{
var a=this.attributes, str=“<“+this.tagName, i=0;for(;i<a.length;i++)
if(a[i].specified) str+=“ “+a[i].name+‘=”‘+a[i].value+‘“‘;
if(!this.canHaveChildren) return str+“ />“;
return str+“>“+this.innerHTML+“</“+this.tagName+“>“;
});
HTMLElement.prototype.__defineGetter__(“canHaveChildren“,function()
{
switch(this.tagName.toLowerCase())
{
case “area“: case “base“: case “basefont“:
case “col“: case “frame“: case “hr“:
case “img“: case “br“: case “input“:
case “link“: case “meta“: case “isindex“:
case “param“:return false;
} return true;
});
}
firefox和ie的事件
firefox和ie的事件对象稍微不同,比方说下面这个在ie下获得鼠标位置的方法
<button onclick=”onClick()” >获得鼠标点击横坐标</button>
<script type=”text/javascript”>
function onclick(){
alert(event.clientX);
}
</script>
需要改成
<button onclick=”onClick(event)”>获得OuterHTML</button>
<script type=”text/javascript”>
function onclick(event){
alert(event.clientX);
}
</script>
才能在两种浏览器下使用
children与childNodes
ie提供的children,childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而ie的childNodes和children不会
比如
<div id=”dd”>
<div>yizhu2000</div>
</div>
id为dd的div在ie下用childNodes查看,其子节点数为1,而ff下为三,我们可以从ff的dom查看器里面看到他的childNodes为["\n ", div, "\n"]
要在ff下模拟children的属性我们可以这样做
if(typeof(HTMLElement)!=“undefined“ && !window.opera){
HTMLElement.prototype.__defineGetter__(“children“,function()
{
for(var a=[],j=0,n,i=0; i<this.childNodes.length; i++){
n=this.childNodes[i];if(n.nodeType==1){a[j++]=n;if(n.name){
if(!a[n.name])a[n.name]=[]; a[n.name][a[n.name].length]=n;}
if(n.id) a[n.id]=n;}}return a;
});
}
几个有用的工具函数
在ff下模拟ie的insertAdjacentHTML
if(typeof(HTMLElement)!=“undefined“ && !window.opera){
HTMLElement.prototype.insertAdjacentHTML=function(where, html)
{
var e=this.ownerDocument.createRange();
e.setStartBefore(this);
e=e.createContextualFragment(html);
switch (where)
{
case ‘beforeBegin‘: this.parentNode.insertBefore(e, this);break;
case ‘afterBegin‘: this.insertBefore(e, this.firstChild); break;
case ‘beforeEnd‘: this.appendChild(e); break;
case ‘afterEnd‘:
if(!this.nextSibling) this.parentNode.appendChild(e);
else this.parentNode.insertBefore(e, this.nextSibling); break;
}
};
}
模拟DotNet的string.format
String.prototype.format=function()
{
if(arguments.length==0) return this;
for(var s=this, i=0; i<arguments.length; i++)
s=s.replace(new RegExp(“\\{“+i+“\\}“,“g“), arguments[i]);
return s;
};
这样我们就可以在程序里使用诸如:
“username:{0} nickname {1}”.format(“yizhu2000″,”二毛五”)
资源
meizz的blog http://blog.csdn.net/meizz/
因为现在浏览器的安全机制都比较好，所以本程序只能在本地运行，并且只支持IE
该程序的下载地址为:http://miaoqiyuan.cn/products/js-filesearch.rar
当用非IE浏览器访问时提示：Sorry!本系统只支持IE咯~请用IE浏览此页
当用IE访问，没有启用Javascript的时候提示：您的浏览器不支持JavaScript,所以这个程序当前不能使用。
当启用Javascript但禁用了ActiveX时提示：您的浏览器不能创建ActiveX,请刷新后启用ActiveX后访问。
本程序可以通过定义:FTO=FSO.GetFolder(“D:\\教程”);来设定搜索的目录为D:\\教程;
我写这个程序的出发点是为了用制作光盘时做光盘文件搜索的文件搜索系统，获取当前盘符就是一个很难的问题咯(Javascript中没有获取当前路径的函数)，于是我写了一个小函数，可以通过FTO=FSO.GetFolder(_Path(“./”));来设定当前目录，FTO=FSO.GetFolder(_Path(“./resource/”));来设定子目录，FTO=FSO.GetFolder(_Path(“./../”));来设定父目录。
时间太晚了，还有因为还没有找到代码高亮的WP插件，所以先不发代码。
firefox与ie 的javascript 兼容问题
在网上抄的，每次阅读都收益非浅啊
现在发出来分享个大家
* 程序特点
1. 当鼠标移过时只能分析是否在加载，当加载时移动事件失效。防止用户还没有看完加载的数据而转页。
2. 增加了点击事件,当用户确定本页内容无可用信息时，点击程序不判读是否自动加载而直接转页,也可点击[x]关闭Loading。
3. 支持多浏览器:IE7,IE6,IE5.5,IE5,FireFox2.0,Safari3.05,Opera(因本人美工有限Safari,Opera显示不是很理想，不过程序没有问题)
* 运行原理
1. 通过_Load(_L)以兼容的方式加载主函数_L()
2. 主函数_L()用_G获取页面中LI,当页面加载完成后，给LI增加onmouseover事件,再给LI增加onclick事件。
3. onclick:判断LI是否存在title，如果不存在则退出；存在则定义LI的onclick事件为把所有LI的class属性修改为no,把当前LI的class属性修改为cu,在框架中加载LI title对应的网页,同时显示Loading至网页加载完毕
4. onmouseover:判断是否在加载中，加载中则退出；不在加载中则把所有LI的class属性修改为no,把当前LI的class属性修改为cu,在框架中加载LI title对应的网页,同时显示Loading至网页加载完毕
5. 增加事件完毕，隐藏Loading
* 主要函数
1. _Load(f):在页面加载完成后运行函数f
2. _G(o,t,p):返回p对象中ID(TagName,Name)为o的对象
程序测试地址:http://www.miaoqiyuan.cn/products/yuming-query.shtml
每次可以查询500个域名，本程序可以自动生成0-9999的com,cn,net,org的域名~
不喜欢用别人写的框架，所以没用框架，全是自己写的代码~
本来想一张惯例把代码全发出来，想了想还是只发部分代码了，毕竟这是”考试”。
浏览器兼容：火狐，IE7，IE6，IE5.5，IE5，Opera9.25，Safari3.0.5显示正常
CSS用的绝对定位，Body区域中DIV只有Class，这我写过的最简洁的~
脚本只用一个document.onmouseover=function(e)加载，然后根据className来决定是否放大该层
演示地址:http://www.miaoqiyuan.cn/products/wo-aliued.html
注:源程序支持火狐，IE7，IE6，IE5.5，IE5，Opera9.25，Safari3.0.5并测试正常，通过W3C校验，但因程序代码用了加密，服务器端程序(http://www.miaoqiyuan.cn/products/wo-aliued.asp
)不能读取Firefox的来路信息，所以请用IE测试~
2
3
4
5
6
<body>
<div class="mqycn001"></div>
<div class="mqycn002"></div>
<div class="mqycn003"></div>
</body>
1
2
3
4
body div{position:absolute;background:#66F}
.mqycn001 {left:20px;top:20px;width:300px;height:200px;}
.mqycn001_0 {left:19px;top:19px;width:375px;height:250px;}
/*省略部分CSS代码*/
1
2
3
4
5
document.onmouseover=function(e){
e = window.event || e;
var o = e.srcElement || e.target;
/*省略部分JavaScript代码*/
}