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. 阿里云WinServer2008下配置IIS7支持php

    先送一只法克鱿给百度,百度了n多的方法都或多或少有问题. 0.php安装包 php-5.2.1-Win32.zip 下载地址 http://pan.baidu.com/s/1pJuc8YZ 最开始是p ...

  2. 打开Openstack dashboard出现Internal Server Error

    最近研究openstack,想把自己遇到的问题记录下来,同时如果有别的朋友也碰到同样问题的时候可以有个参考. 这次的问题是在openstack搭建好之后,dashboard本身是能用的,但是在某一天后 ...

  3. VS2013 Update 2正式发布 .NET Framework“云优先、移动优先”

    2013 Update 2正式发布 .NET Framework“云优先.移动优先” 投递人 itwriter 发布于 2014-05-13 12:33 评论(19) 有2155人阅读  原文链接   ...

  4. MVVM框架avalon在兼容旧式IE

    迷你MVVM框架avalon在兼容旧式IE做的努力 当前标签: avalon 共3页: 1 2 3 下一页  迷你MVVM框架avalon在兼容旧式IE做的努力 司徒正美 2014-03-13 11: ...

  5. windows下Jdk和Tomcat的安装配置

    Jdk全称Java development Kit,Jdk是sun公司提供的免费开源的java语言开发工具包,现在最新版本是8.0,说道jdk的版本,有些人可能会有疑惑,怎么有说jdk1.6,jdk1 ...

  6. Scrum与高效能人士

    Scrum与高效能人士的执行4原则   分享了高效能人士的执行4原则,发现它和Scrum非常相近,可以形成互补. Scrum框架: 高效能人士的执行4原则框架: Scrum与4原则 Sprint Ba ...

  7. 企业架构研究总结(26)——TOGAF架构开发方法(ADM)之实施治理阶段

    1.9 实施治理(Implementation Governance) 企业架构开发方法各阶段——实施治理 1.9.1 目标 本阶段的目标是: 为每个实施计划给予建议. 对涵盖整个实施和部署过程的架构 ...

  8. springMVC3学习(七)--Interceptor拦截器

    Spring为我们提供了:org.springframework.web.servlet.HandlerInterceptor接口, org.springframework.web.servlet.h ...

  9. Guacamole 介绍

    Guacamole 介绍以及架构   目前在从事一些虚拟化解决方案方面的工作,最近项目有需求,希望能在浏览器上远程操作虚拟机. 此时发现了Guacamole,一个提供远程桌面的解决方案的开源项目,通过 ...

  10. C# ToString格式控制符

    C 货币 2.5.ToString("C") ¥2.50 D 十进制数 25.ToString("D5") 00025 E 科学型 25000.ToString ...