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. ASP.NET请求处理过程

    当请求一个*.aspx文件的时候,这个请求会被inetinfo.exe进程截获,它判断文件的后缀(aspx)之后,将这个请求转交给Aspnet_isapi.dll,aspnet_isapi.dll会通 ...

  2. Ali也开始玩了阿

    http://blog.alipay.com/ 查看源代码

  3. Design Thinking BrainWalk

    Design Thinking   Design Thinking Workshop @ Agile Tour 2013 Shanghai 摘要: 设计思维工作坊上周日在2013年敏捷之旅上海站,引导 ...

  4. Linq to XML的练习

    假如有以下XML: <?xml version="1.0" encoding="utf-8" ?> - <export> - <p ...

  5. 【IOS开发】搜索和排序(好友列表,通讯录的实现,searchbar)

    一.效果图: 二.概述 实现一个好友列表,可以分为男女两个选项,并且实现搜索和排序功能.我的数据是放在plist文件中. 三.代码简述 代码结构如图,首先自定义一个Cell. cell.h #impo ...

  6. JavaWEB开发国际化

    1.国际化开发概述 )软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. )国际化又称为 i18n:inter ...

  7. vim插件:显示树形目录插件NERDTree安装 和 使用

    下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloose/nerdtree 下载zip安装包 或者使用下面官网源文件安装方法 ...

  8. 鸟哥的LINUX私房菜基础篇第三版 阅读笔记 一

    1. Linux的档案权限与目录配置      一.基础知识:             a.分为三类,拥有者(owner).群组(group).其他人(other)             b.三个核 ...

  9. Singleton模式C++实现

    Singleton模式C++实现 Singleton是设计模式中比较简单的一个.园中的朋友们应该都很熟悉了.前段时间参加xxx外企的面试,和面试官讨论C++的时候正好写了一个.当时由于在有些地方考虑不 ...

  10. C++中内存泄漏的检测方法介绍

    C++中内存泄漏的检测方法介绍 首先我们需要知道程序有没有内存泄露,然后定位到底是哪行代码出现内存泄露了,这样才能将其修复. 最简单的方法当然是借助于专业的检测工具,比较有名如BoundsCheck, ...