用户点击某个链接时弹出一个新窗口
javascript使用window对象的open()方法来创建新的浏览器窗口，这个方法有三个参数：
window.open(url,name,features)
url:新窗口地址，如果省略，则弹出空白窗口
name：新窗口的名字
features：新窗口的属性。

比如：

function open_url(url){

            window.open(url,"new-window","width:320,height:480");

        }

用 “javascript:” 伪协议来调用上面那个函数。（“javascript:” 伪协议让我们可以通过一个链接来调用javascript函数）

<body>

<a href="javascript:open_url('http://www.baidu.com');">百度</a>

<script type="text/javascript">

function open_url(url){

    window.open(url,"new-window","width:320,height:480");

}

</script>

</body>

用onclick事件处理函数作为属性 嵌入<a>标签

<a href="#" onclick="open_url('http://www.baidu.com');return false;">百度2</a>

<script type="text/javascript">

function open_url(url){

    window.open(url,"new-window","width:320,height:480");

}

</script>

上面两种方法没有预留退路，如果用户禁用浏览器的javascript1功能，这样的链接就没用处了。

预留退路就是说，虽然在遇到不支持js的浏览器或者用户禁用js这类障碍某些功能无法使用，但最基本的操作仍能顺利完成。

<!-- 预留退路的做法-->

<a href="http://www.baidu.com" onclick="open_url('http://www.baidu.com'); return false">百度3</a>

<!--预留退路的简化版-->

<a href="http://www.baidu.com" onclick="open_url(this.getAttribute('href'); return false">百度4</a>

<!--预留退路的最简化版-->

<a href="http://www.baidu.com" onclick="open_url(this.href); return false">百度4</a>

<!--由DOM提供的this.href属性-->

现在即使javascript已被禁用这个链接也是可用的。

行为和结构分离开：

<a href="http://www.baidu.com" class="link">百度5</a>

<script type="text/javascript">

function open_url(url){

    window.open(url,"new-window","width:320,height:480");

}    

window.onload = prepareLinks;

function prepareLinks(){

    var links=document.getElementsByTagName('a');

    for (var i=0; i<links.length; i++){

        if (links[i].getAttribute('class') == 'link'){

            links[i].onclick = function(){

                open_url(this.getAttribute('href'));

                return false;

            }

        }

    }

}

</script>

第五章 javascript编程可养成的好习惯的更多相关文章

  1. 第五章 JavaScript对象及初识面向对象

    第五章   JavaScript对象及初识面向对象 一.对象 在JavaScript中,所有事物都是对象,如字符串.数值.数组.函数等. 在JavaScript对象分为内置对象和自定义对象,要处理一些 ...

  2. 学习笔记 第十五章 JavaScript基础

    第15章   JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...

  3. 第五章JavaScript

    创建数组://1.字面量方式创建 (推荐大家使用这种方式创建数组 简单粗暴) var colors = ['red','color','yellow'];console.log(colors) //空 ...

  4. #《Essential C++》读书笔记# 第五章 面向对象编程风格

    基础知识 继承机制定义了父子(parent/child)关系.父类(parent)定义了所有子类(children)共通的共有接口(public interface)和私有实现(private imp ...

  5. WindowsPE 第五章 导出表编程-1（枚举导出表）

    导出表编程-1-枚举导出表 开始前先回忆一下导出表: 1.枚举dll函数的导出函数名字: 思路: (1)加载dll到内存里. (2)获取PE头,逐步找到可选头部. (3)然后找到里面的第一个结构(导出 ...

  6. 实践javascript美术馆的小案例，学习到的东西还是蛮多的，包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

    javascript美术馆(改进2) 一.javascript编程过程中的好习惯 1.实现预留退路 js被禁掉,图片也可以显示出来,href属性带有图片路径 <script src=" ...

  7. [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers

    本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...

  8. JavaScript DOM编程艺术-学习笔记（第五章、第六章）

    第五章: 1.题外话:首先大声疾呼,"js无罪",有罪的是滥用js的那些人.js的father 布兰登-艾克,当初为了应付工作,10天就赶出了这个js,事后还说人家js是c语言和s ...

  9. [书籍翻译] 《JavaScript并发编程》 第二章 JavaScript运行模型

    本文是我翻译<JavaScript Concurrency>书籍的第二章 JavaScript运行模型,该书主要以Promises.Generator.Web workers等技术来讲解J ...

随机推荐

  1. ASP.NET控件之RangeValidator控件

    作用:对Textbox或者输入框进行范围验证: 属性:ControlToValidate:要验证的控件: ErrorMessage:错误提示信息: MaxiMumValue:最大值: MinimumV ...

  2. 洛谷P3802 小魔女帕琪

    P3802 小魔女帕琪 题目背景 从前有一个聪明的小魔女帕琪,兴趣是狩猎吸血鬼. 帕琪能熟练使用七种属性(金.木.水.火.土.日.月)的魔法,除了能使用这么多种属性魔法外,她还能将两种以上属性组合,从 ...

  3. VS2010 不显示 最近使用的项目 解决办法(转)

    昨天重装了VS2010,然后开了项目看了下今天早上再打开发现起始页近使用项目列表是空白的,每次打开项目都要去到指定目录去找解决方案才能打开,感觉很麻烦,在网上找了下解决方案,解决步骤下:菜单 —— 运 ...

  4. before和after兼容性测试

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. poj2186-Popular Cows(强连通分支)

    有N(N<=10000)头牛,每头牛都想成为most poluler的牛,给出M(M<=50000)个关系,如(1,2)代表1欢迎2,关系可以传递,但是不可以相互,即1欢迎2不代表2欢迎1 ...

  6. 1100 Mars Numbers（20 分）

    People on Mars count their numbers with base 13: Zero on Earth is called "tret" on Mars. T ...

  7. spring boot之 Bean的初始化和销毁(4)

    原文:https://blog.csdn.net/z3133464733/article/details/79189699 -------------------------------------- ...

  8. Silverlight 密码框 Focus

    在做一个例子是需要运行起来后焦点默认设置在密码框上,在网上查了资料 自己找到一种方法,此方法在oob模式下管用 public Login() { InitializeComponent(); txtL ...

  9. （win10 64位）未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序

    在64位的系统上,默认不支持Microsoft.Jet.OLEDB.4.0的驱动程序,系统默认会提示未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”的错误.(网上看到的,先这么认 ...

  10. grep-检索文本

    grep -r bes.dsf.server.zookeeper ./ //递归搜索,不支持指定文件类型 find ./ -name "*.entity.xml" -exec gr ...