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. foreach,foreachelse

    foreach,foreachelse Table of Contents目录 iteration 用于显示当前循环的执行次数[待考] first : 当前 foreach 循环第一次执行时 firs ...

  2. .NET MVC4 实训记录之五(访问自定义资源文件)

    .Net平台下工作好几年了,资源文件么,大多数使用的是.resx文件.它是个好东西,很容易上手,工作效率高,性能稳定.使用.resx文件,会在编译期动态生成已文件名命名的静态类,因此它的访问速度当然是 ...

  3. ASP.NET MVC路由

    ASP.NET MVC路由(四) 前言 在前面的篇幅中我们讲解路由系统在MVC中的运行过程以及粗略的原理,想必看过前面篇幅的朋友应该对路由有个概念性的了解了,本篇来讲解区域,在读完本篇后不会肯定的让你 ...

  4. IOS UI 第四篇:基本UI

    ViewController 应用   再第一个XIB页面创建另一个XIB页面,并且通过按钮调用它     - (IBAction)GoSecond:(id)sender {    secondVie ...

  5. 关于iTunes随机播放和我所不知道的自己

    无意中看到这套题,很有意思,自己做了一下. 规则是这样的:打开你的播放器,我的是iTunes,不管是哪个,总之打开最全的那个播放列表,开启随机播放,按顺序把每首歌名写在下面每道题的后面,比如第一首歌是 ...

  6. 一个简单的Garbage Collector的实现

    一个简单的Garbage Collector的实现 前言: 最近看了google的工程师写的一个非常简单的垃圾收集器,大概200多行C代码,感叹大牛总能够把复杂的东西通过很简单的语言和代码表达出来.为 ...

  7. 企业架构与建模之ArchiMate的由来和详述(上)

    终于完成了关于企业架构框架理论的总结,谢谢各位看官的支持,能挺过之前过于理论化的叙述而坚持到现在着实不易,笔者也自愧没有实践经验可以分享,希望日后有兴趣的看官能够不吝赐教.在本系列后面的也是最后一个大 ...

  8. Java并发性和多线程介绍

    java并发性和多线程介绍: 单个程序内运行多个线程,多任务并发运行 多线程优点: 高效运行,多组件并行.读->操作->写: 程序设计的简单性,遇到多问题,多开线程就好: 快速响应,异步式 ...

  9. Mac下quick-cocos2d-x player 无法运行解决方案

    今天打算在Mac开发我的游戏,因为游戏用的2.2.5版的player,没有安装版.在Mac上运行player时提示player文件已经损坏. 解决方法:在shell下执行如下指令即可 mv $QUIC ...

  10. 了解OData(一)

    了解OData(一) 最近做了一个小项目,其中用到了 WCF Data Service,之前是叫 ADO.NET Data Service 的.关于WCF Data Service,博客园里的介绍并不 ...