首页 > 代码库 > 链接的平稳退化、渐进增强和向后兼容

链接的平稳退化、渐进增强和向后兼容

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;等,检查浏览器是否支持这种方法。

 

链接的平稳退化、渐进增强和向后兼容