JavaScript使用window对象的open()方法来创建新的浏览器窗口。这个方法有三个参数:
window.open(url,name,features)
这三个参数都是可选的。
1.第一个参数是想在新窗口里打开的网页的URL地址。如果省略这个参数,屏幕上将弹出一个空白的浏览器窗口。
2.第二个参数是新窗口的名字。可以在代码里通过这个名字与新窗口进行通信。
3.最后一个参数是一个以逗号分隔的字符串,其内容是新窗口的各种属性。这些属性包括新窗口的尺寸(宽度和
高度)以及新窗口被启用或禁用的各种浏览功能(工具条、菜单条、初始显示位置,等等)。对于这个参数应该
掌握以下原则:新窗口的浏览功能要少而精。
open()方法是使用BOM的一个好案例,它的功能对文档的内容也无任何影响(那是DOM的地盘)。这个方法只
与浏览环境(具体到这个例子,就是window对象)有关。
下面这个函数是window.open()方法的一种典型应用:

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

这个函数将打开一个320像素宽、480像素高的新窗口“popup”。因为我在这个函数里已为新窗口命名,所以当

把新的URL地址传递给此函数时,这个函数将把新窗口里的现有文档替换为新URL地址处的文档,而不是再去创建

一个新窗口。

"JavaScript:"伪协议
调用popUp函数的一个办法是使用伪协议(pseudo-protocol)。
“真”协议用来在因特网上的计算机之间传输数据包,如HTTP协议(http://)、FTP协议(ftp://)等,伪协议则是一种非标准化的协议。"JavaScript:"伪协议让我们通过一个链接来调用JavaScript函数。
下面是通过"JavaScript:"伪协议调用popUp()函数的具体做法:
<a href="javascript:popUp('http://www.example.com/');">Example</a>
这条语句在支持"JavaScript:"伪协议的浏览器中运行正常,较老的浏览器则会去尝试打开那个链接但失败,支持这种伪协议但禁用了JavaScript功能的浏览器会什么也不做。
总之,在HTML文档里通过"JavaScript:"伪协议调用JavaScript代码的做法非常不好。
使用内嵌的事件处理函数
当在某个链接里用onclick事件处理函数去打开新窗口时,这个链接的href属性似乎没有什么用处——与这个链接有关的重要信息已经都包括在它的onclick属性里了。这也正是我们经常会看到如下所示的链接的原因:
<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>
因为上面这条HTML指令里使用了return false语句,这个链接不会真的被打开。"#"符号是一个仅供文档内部使用的链接记号(单就这条指令而言,"#"是未指向任何目标的内部链接)。在某些浏览器里,"#"链接指向当前文档的开头。把href属性的值设置为"#"只是为了创建一个空连接。实际工作全部由onclick属性负责完成。
但是这个技巧与用"JavaScript:"伪协议调用JavaScript代码的做法同样糟糕,因为他们都不能平稳退化。如果用户已经禁用了浏览器的JavaScript功能,这样的链接将毫无用处。

具体到popUp()函数,为其中的JavaScript代码预留出退路很简单:在链接里把href属性设置为真是存在的URL地址,让它成为一个有效的链接,如下所示:
<a href="http://www.example.com/" onclick="popUp('http://www.example.com'); return false;">Example</a>
因为URL地址出现了两次,上面这些代码显得有点冗长,我们可以利用JavaScript语言把它改写得简明一些。this可以用来代表任何一种当前元素,所以可以用this和getAttribute()方法提取出href属性的值,如下所示:
<a href="http://www.example.com/" onclick="popUp(this.getAttribute('href'); return false;)">Example</a>
老实说,上面这条语句没有精简多少。当前链接的href属性还有一个更简明的引用办法——使用由DOM提供的this.href属性:
<a href="http://www.example.com/" onclick="popUp(this.href; return false);">Example</a>
上面这段代码与href="javascript:..."或href="#"相比,这几种变体的效果要好得多。
所以,在把href属性设置为真是存在的URL地址后,即使JavaScript已被禁用(或遇到了搜索机),这个链接也是可用的。虽然这个链接在功能上打了点折扣(因为它没有打开一个新窗口),但他并没有彻底失效。这是一个经典的”平稳退化“的例子。

JavaScript - 平稳退化的更多相关文章

  1. Javascript平稳退化、渐进增强

    平稳退化 : javascript平稳退化就是如果一个浏览器完全不支持js或者禁用js的时候,它的基本功能不会受到任何影响.比方说一个网站使用了大量javascript来优化页面,我们现在把浏览器的j ...

  2. 平稳退化,JS和HTML标记分离,极致性能的JavaScript图片库

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. JavaScript DOM编程艺术读后感(1)—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  4. javascript DOM 编程艺术 札记2 平稳退化

    定义 指的是即便浏览器不支持javascript,页面的基础展示功能也不会受到影响的做法. 不能平稳退化的实例 javascript:这种伪协议,它可以通过链接调用javascript函数.比如< ...

  5. HTML和JavaScript代码分离、平稳退化(1)

    使用的编辑器是Hbuilder,浏览器是Chrome. HTML和JavaScript代码分离,会使得修改网页功能和代码的阅读与维护会轻松的许多,不用在DOM中阅读大量的JavaScript代码. 文 ...

  6. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  7. DOM Scripting -- Web Design with JavaScript and the Document Object Model 第2版 读书笔记

    1. childNodes  nodeValue <p id="p1">hello p!</p> alert(document.getElementById ...

  8. 读《JavaScript DOM编程艺术》

    国庆假期花了三四天看了这本书,书很薄,因为是入门书,干货也不是很多. 4. childNodes nodeType nodeValue firstChild lastChild childNodes返 ...

  9. JavaScript DOM编程艺术读书笔记(二)

    第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...

随机推荐

  1. CRM2011 concurrency问题及解决方案

    CRM2011对删除和添加操作会自动做判断,比如A打开纪录x,B也打开纪录x,然后B删除了纪录x,A去更新的话就会有提示.更新的话是后者覆盖前者,比如A打开纪录x,B打开纪录x,然后B把记录x中的字段 ...

  2. Visual Studio 2014

    开发 ASP.NET vNext 初步总结(使用Visual Studio 2014 CTP1) 2014-06-06 18:04 by 梁逸晨, 2149 阅读, 29 评论, 收藏, 编辑 新特性 ...

  3. 有关Android存储的相关概念辨析

    我想念许多Android开发人员在碰到有关存储的相关问题时,肯定遇到过“内部存储/内存”.“外部存储/外存”等类似的概念,尤其是将相关概念跟非开发人员解释时,那真是“秀才遇到兵,有理说不清哪”.包括我 ...

  4. Oracle组函数、多表查询、集合运算、数据库对象(序列、视图、约束、索引、同义词)等

    count组函数:(过滤掉空的字段) select count(address),count(*) from b_user max() avg() min(),sum() select sum(age ...

  5. ROWNUMBER()、RANK()、DENSE_RANK()、NTILE1

    SQLServer针对排名函数ROWNUMBER().RANK().DENSE_RANK().NTILE的研究!~ 相信大家在软件工程中经常会遇到对某些数据进行排名的问题,尤其是对于电子商务的HR来说 ...

  6. 分布式搜索ElasticSearch构建集群与简单搜索实例应用

    分布式搜索ElasticSearch构建集群与简单搜索实例应用 关于ElasticSearch不介绍了,直接说应用. 分布式ElasticSearch集群构建的方法. 1.通过在程序中创建一个嵌入es ...

  7. Linux目录树详细说明

    Linux目录树详细说明 目录树的主要部分有root(/)./USR./var./home等等.下面是一个典型的linux目录结构如下: / 根目录 /bin 存放必要的命令 /boot 存放内核以及 ...

  8. IT职位分析

    人才市场的IT职位分析   最近要找长沙的工作,于是通过湖南人才市场搜索了一下职位.结果得到的数据让我很难比较,作为一个 IT 业滚爬了多年的程序员,对这样的搜索结果很不满意.于是,我不得不自己来整理 ...

  9. Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器

    Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器 在项目中,需要做一个幻灯功能,领导说需要一个小清醒的啊,轻量级的.刚开始搜索到这个: CRAFTYSLIDE插件.但是用起 ...

  10. Deep Belief Network简介

    Deep Belief Network简介 1. 多层神经网络存在的问题 常用的神经网络模型, 一般只包含输入层, 输出层和一个隐藏层: 理论上来说, 隐藏层越多, 模型的表达能力应该越强.但是, 当 ...