首页 > 代码库 > 链接的平稳退化、渐进增强和向后兼容
链接的平稳退化、渐进增强和向后兼容
1.平稳退化
<a href="http://www.baidu.com/" title="A fengxz" onclick="popPup(this.getAttribute("href"));return false;">fengxz</a>//HTML
function popPup(winURL){
window.open(winURL);
}//JavaScript
即使JavaScript已被禁用,这个链接也是可用的。
2.渐进增强
<a href="http://www.mamicode.com/www.baidu.com" title="A fengxz" class="popPup">fengxz</a>//HTML
window.onload=prepareLink;
function prepareLink(){
var link=document.getElementsByTagName("a");
for(var i=0;i<link.length;i++){
if(link[i].getAttribute("class")=="popPup"){
link[i].onclick=function{
popPup(this.getAttribute("href"));
return false;
}
}
}
}
function popPup(winURL){
window.open(winURL);
}//JavaSript
JavaScript与HTML文档分离。
3.向后兼容
if(!document.getElementsByTagName("a")) return false;等,检查浏览器是否支持这种方法。
链接的平稳退化、渐进增强和向后兼容