从几天前开始接触《JavaScript DOM编程艺术 第二版》这本书,准备在以下文章里把在学习中遇到的问题来汇总起来。
平稳退化(在不确定浏览器支持不支持JavaScript或者用户禁用JavaScript情况下,完成页面的基本操作)
一个在网页中打开链接的例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8"></meta>
<title></title>
<script>
function popUp(winURL){
window.open(winURL,"popup","width:300px,height:480px")
}
</script>
</head>
<body>
<a href="http://www.baidu.com" onclick="popUp(this.href;return false)">点击链接</a>
</body>
</html>
类似于css中可以将style从html中分离出来方便维护,JavaScript可以将onclick属性从html中分离出来,存放在独立的js文件中,方便调出和维护。于是可以加入下面js代码
window.onload=prepareslink; //定义全页面加载完毕再开始执行prepares函数
function prepareslink(){
var links=getElmentsByTagNames("a");
for(i=0;i<links.length;i++){
if(links[i].getAttribute("class")=="popup"){
links[i].onclick=function(){
popUp(this.getAttribute("href"))
return false;
}
}
}
function popUp(winURL){
window.open(winURL,"popup","width:300px,height:480px")
}
}
当然其中body中的a标签要加上class="popup"样式,方便for循环去遍历所有数组中的元素后与之匹配
向后兼容(浏览器不支持一些DOM语句时,识别操作)
if(!getAttribute||getElmentsByTagNames)return false; //判断是否识别多种方法或者属性
addloadEvent函数(共享onload)
function addloadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}