用户点击某个链接时弹出一个新窗口
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. SQL Server远程调试失败

    前言 刚刚打开SQL Server 2008,想要新建一个数据库.发现出现了一个问题,这个问题由于之前没有遇到过,所以这次拿出来记录一些解决方式. 内容 出现上面这个错误的原因可能是由于咱们在装VS2 ...

  2. c# Relative Path convert to Absolute Path

    Reference: http://stackoverflow.com/questions/4796254/relative-path-to-absolute-path-in-c http://sta ...

  3. luogu 3806 【模板】点分治

    luogu 3806 [模板]点分治 给定一棵有n个点的树,有m个询问,每个询问树上距离为k的点对是否存在.树的权值最多不超过c.n<=10000,m<=100,c<=1000,K& ...

  4. Mysql-6-数据类型和运算符

    1.mysql数据类型 (1)数值数据类型:包括整数类型tinyint.smallint.mediumint.int.bigint,浮点小数类型float和double,定点小数类型decimal. ...

  5. Gson本地和服务器环境不同遇到的Date转换问题 Failed to parse date []: Invalid time zone indicator

    GoogleGson在处理Date格式时有个小陷阱,在不同环境中部署时可能会遇到问题. Gson默认处理Date对象的序列化/反序列化是通过一个SimpleDateFormat对象来实现的,通过下面的 ...

  6. myclipse运行web的一些问题

    一.修改项目访问路径 项目右键>properties(属性)>输入web搜索>双击web>修改Web-Content root内容即可 二. myeclipse中web项目不自 ...

  7. php保存网络图片到本地

    //保存网络图片 function getimg($url) { $state = @file_get_contents($url,0,null,0,1);//获取网络资源的字符内容 if($stat ...

  8. JMeter - 如何在多个测试环境中运行多个线程组

    概述: 作为性能测试的一部分,我不得不为我们的应用程序提供各种用例/业务工作流程的性能测试脚本.当我设计我的性能测试脚本时,我将确保我有本文中提到的可重用测试脚本. JMeter - 如何创建可重用和 ...

  9. 导入别的类中的bean

    @Configuration class CommonContext { @Bean public MyBolt myBolt() { return new MyBolt(); } } ... @Co ...

  10. java——helloword

    第一次接触Java,感觉乱乱的,需要捋清楚一些概念再安装java. 首先,什么是JDK,什么是JRE呢? JRE:JAVA运行环境(Java Runtime Envirnment) JDK:Java开 ...