专栏目录35 篇

专栏

编程语言

从 C#、Go、JavaScript 到 Python,整理语言特性、运行机制、并发模型与编码实践,形成循序渐进的学习路径。

共 35 篇文章

查看全部章节
阅读进度 97% 97%
编程语言 /第五章 JavaScript/语法与常用技巧
ARTICLE

给Javascript代码“预留退路”

收录于「编程语言」专栏 查看专栏目录
本文目录

所谓给Javascript代码“预留退路”意思就是当用户将浏览器的Javascript功能禁用的时候,页面中使用了Javascript的地方要能够以变通的方式得以运行,而不能让用户看到出错或是点击某按钮而毫无反应,这也是用户体验很重要的一部分。

举个简单的例子来说,点击页面中的一个链接可以弹出一个新的页面,我们通常会使用window.open,代码如下:

<a href="#" onclick="openWin('http://baidu.com');">百度</a>
<script type="text/javascript">
    function openWin(url) {
        window.open(url, "openwin", "width=600,height=400");
    }
</script>

<a href="javascript:openWin1('http://baidu.com');" >百度</a>
<script type="text/javascript">
    function openWin(url) {
        window.open(url, "openwin", "width=600,height=400");
    }
</script>

上面的两种方法第一种将href的值设置为#,第二种使用伪协议javascript: ,这两种做法都不是很好,没有“预留退路”,当用户将浏览器的Javascript禁用后,点击链接都不是我们想要的结果,正确的做法如下:

<a href="http://baidu.com/"
  onclick="openWin(this.getAttribute('href'));return false;" >百ù度è</a>
 <script type="text/javascript">
     function openWin1(url) {
         window.open(url, "openwin", "width=600,height=400");
     }
 </script>

改进后的方法在禁用Javascript后,也会打开href中的链接地址,只是打开方式有所不同,相比上面两种已经好多了。

评论

评论组件按需加载,不影响文章阅读速度。