【第五章】JavaScript平稳退化的例子

最新推荐文章于 2025-08-18 20:17:18 发布

转载最新推荐文章于 2025-08-18 20:17:18 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3640519/blog/1553057

文章标签：

#javascript #python #ViewUI

本文介绍了如何使用JavaScript处理网页中的链接，在确保用户体验的同时实现平稳退化。通过将JavaScript行为与HTML结构分离，使得即使在JavaScript被禁用的情况下，网页也能正常工作。文中详细解释了如何利用DOM操作来实现这一目标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1.一个例子

由于网站的访问者完全有可能使用的是不支持JavaScript的浏览器，还有一种可能是虽然浏览器支持，但用户已经禁用它了（如，因为讨厌看到弹窗广告）。如果正确使用了JavaScript脚本，就可以让访问者在他们浏览器不支持JavaScript的情况下仍能顺利浏览你的网站，这就是所谓的平稳退化。

如我们需要在打开新链接时打开新的窗口，可以建这样一个函数：

function popUp(url){
    window.open(url, "popup","width=320,height=480";
}

这个函数将打开一个宽高320*480像素的新窗口，窗口名字为“popup”，并打开展示url的内容。那么，我们将如何调用这个函数呢？通常我们的做法有如下两种：

<a href="javascript:popUp('http://www.example.com/');">Example</a>

<a href="#" onclick="popUp('http://www.example.com/');return false;">Example</a>

其中，前者使用的是“javascript:”伪协议（“真”协议用来在因特网上的计算机之间传输数据包的，如HTTP协议、FTP协议）的方式，后者使用的是内嵌事件处理函数。但是，遗憾的是，这样做并不能平稳退化，因为如果用户已经禁用了浏览器的JavaScript功能，那么这样的链接也不会生效。

综上所述，我们需要让它成为一个有效的链接，如下即可：

<a href="http://www.example.com/" onclick="popUp('http://www.example.com';return false;">Example</a>

<a href="http://www.example.com/" onclick="popUp(this.getAttribute('href');return flase;">Example</a>

<a href="http://www.example.com/" onclick="popUp(this.href;return flase;">Example</a>

2.分类JavaScript

类似于使用style属性，onclick是一种没有效率有容易引发问题的做法。那么，可以用类似于CSS中的class或id属性那样，将JavaScript代码调用行为与HTML文档结构内容分离开，如下：

<a href="http://www.example.com/" class="popUp">Example</a>

如果想把一个事件添加到某个带特定id属性的元素，用getElementById可以解决问题。如：getElementById(id).event = action

如果是涉及到多个元素，可以用getElementsByTagName和getAttribute把事件添加到特定属性上。如下：

var links = document.getElementsByTagName("a");    //获取整个页面的所有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;
        }
    }
}

这里有一个问题是，如果把这段代码存入外部JavaScript文件，它将无法运行，因为第一行将在文件加载时立即执行。如果这个文件在<head>部分用<script>调用，它在HTML文档之前加载调用。如果这个文件在底部</body>之前调用，它不能保证哪个文件最先结束加载。所以，这样就会无法正常运行此JavaScript程序。

我们必须让这些代码在HTML文档全部加载之后马上开始执行，采用window.onload即可，如下：

window.onload = prepareLinks;
function prepareLinks(){
    var links = document.getElementsByTagName("a");    //获取整个页面的所有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(url){
    window.open(url, "popup", "width=320,height=480");
}

3.向后兼容

由于有的比较古老的浏览器可能无法理解DOM提供的方法，所以需要进行对象检查。如下：

window.onload = function(){
    if(!document.getElementsByTagName) return false; //对象检测
    var links = document.getElementsByTagName("a");    //获取整个页面的所有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(url){
    window.open(url, "popup", "width=320,height=480");
}

参考：JavaScript DOM编程艺术(中文第2版)

转载于:https://my.oschina.net/u/3640519/blog/1553057