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. [java]SpringMVC+Swagger实现自动接口

    项目使用SpringMVC+Maven 1.在站点项目的POM文件中引入Swagger的jar包 <properties> <project.build.sourceEncoding ...

  2. 生成自己的Webapi帮助文档(二)

    经过今天一上午的修改,已经有个基础的框架了,其它功能只能是在实际使用中发现一个修改一个了. 以下是生成的结果示例: 相比昨天,几个Model都有修改,这里就不一一贴代码了,放个代码包上来,有需要的自己 ...

  3. 取得ASKII码值和汉语拼音

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXMAAACmCAIAAACnXPjtAAAgAElEQVR4nO2de3wb1YHv56+7e/fe/e ...

  4. linux时间校准设置,解决与本地时间不一致问题

    时间安装脚本   从NTP上把时间同步到本地 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 更新本地时间 ntpdate us.pool.nt ...

  5. [Usaco2007 Jan]Running贝茜的晨练计划[一般DP]

    Description 奶牛们打算通过锻炼来培养自己的运动细胞,作为其中的一员,贝茜选择的运动方式是每天进行N(1 <= N <= 10,000)分钟的晨跑.在每分钟的开始,贝茜会选择下一 ...

  6. git命令与github使用

    GitHub 是一个类似 SourceForge 的免费项目管理及分享的服务平台,要想使用 github,用户可以免费注册成为 github 注册用户,之后使用git命令进行操作使用.github 的 ...

  7. Slithice 分布式架构设计

    项目原因: 参与过各种 分布式项目,有 Socket,Remoting,WCF,当然还有最常用的可以跨平台的 WebService. 分布式编码的时间浪费: 但是,无一例外的,开发分布式程序的开发遵循 ...

  8. javascript的关键所在---作用域链

    javascript的关键所在---作用域链 javascript里的作用域是理解javascript语言的关键所在,正确使用作用域原理才能写出高效的javascript代码,很多javascript ...

  9. 设置共享文件夹,samba和chmod到底谁的权限大

    1,必备知识.已经知道的请跳过. 首先科普一下这两个东西:samba和chmod其实是完全不同层面的东西,一个是共享服务协议,一个是权限设置语句.但是他们有一个共同的用途:可以用来实现设置一个共享文件 ...

  10. BST&AVL&红黑树简单介绍

    (BST&AVL&红黑树简单介绍) 前言: 节主要是给出BST,AVL和红黑树的C++代码,方便自己以后的查阅,其代码依旧是data structures and algorithm ...