JavaScript平稳退化

最新推荐文章于 2021-06-05 10:25:12 发布

乌龙

最新推荐文章于 2021-06-05 10:25:12 发布

阅读量282

点赞数

本文链接：https://blog.csdn.net/zhanglongxiang/article/details/48052015

版权

JavaScript平稳退化
让那些不支持或禁用了JavaScript功能的浏览器也能顺利地访问你的网站
从CSS身上借鉴，结构与样式分离。
如果我们用一个“挂钩”，就像CSS机制中的class或id属性那样，把JavaScript代码调用行为与HTML文档的结构和内容分离开，网页就会健壮得多。
那么，可否用下面这条语句来表明“当这个链接被点击时，它将调用popUp()函数”的意思呢？
<a href=“http://www.sohu.com/“ class=“popup”>Example</a>
完全可以这样做，JavaScript语言不要求事件必须在HTML文档里处理，我们可以在外部JavaScript文件里把一个事件添加到HTML文档中的某个元素上：
element.event=action…

必须让这些代码在HTML文档全部加载到浏览器之后马上开始执行。还好，HTML文档全部加载完毕时将触发一个事件，这个事件有它自己的事件处理函数。
文档将被加载到一个浏览器窗口里，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在。
我将把我的JavaScript代码打包在prepareLinks函数里，并把这个函数添加到window对象的unload事件上去。这样一来，DOM就可以正常工作了。

test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Image Test</title>
</head>
<body>
<h1>JavaScript实验</h1>
<script type="text/javascript" src="scripts/jsTest.js"></script>
<a href="http://www.sohu.com" class="popup">sohu</a>
</body>
</html>

jsTest.js:
window.οnlοad=prepareLinks;
function prepareLinks()
{
var links = document.getElementsByTagName("a");
for(var 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=320,height=480");
}