用户点击某个链接时弹出一个新窗口
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. [转]SE43 修改SAP标准菜单、登陆界面、背景图片

    1.事务码se43 复制标准菜单S000 到 ZS000  2.按实际需要修改 ZS000  3.在事务码SSM2中用ZS000 代替 S000  4.注销后重新登陆 o 修改SAP登陆界面(在本博客 ...

  2. Java基础--常用API--java.lang.Object

    一.简述 1.Object类是所有类的父类,即直接或间接的继承java.lang.Object类.省略了extends Object. 2.方法 (1)protected native Object ...

  3. 洛谷P1505 [国家集训队]旅游

    题目描述 \(Ray\) 乐忠于旅游,这次他来到了\(T\) 城.\(T\) 城是一个水上城市,一共有 \(N\) 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,\(T ...

  4. 安居客scrapy房产信息爬取到数据可视化(上)-scrapy爬虫

    出发点 想做一个地图热力图,发现安居客房产数据有我要的特性.emmm,那就尝试一次好了~ 老规矩,从爬虫,从拿到数据开始... scrapy的配置 创建一个项目(在命令行下敲~): scrapy st ...

  5. 6、python数据类型之元组（dict）

    字典字典的每个元素就是一个键值对,格式如下key:value{key1:value1,key2:value2,......} 1.创建 dict_eg = { "name":&qu ...

  6. POJ3696 The Luckiest Number 欧拉定理

    昨天终于把欧拉定理的证明看明白了...于是兴冲冲地写了2道题,发现自己啥都不会qwq 题意:给定一个正整数L<=2E+9,求至少多少个8连在一起组成正整数是L的倍数. 这很有意思么... 首先, ...

  7. Linux--5 mariadb和redis的安装

    一.MYSQL(mariadb) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可. 开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL ...

  8. 027 Remove Element 移除元素

    给定一个数组和一个值,在这个数组中原地移除指定值和返回移除后新的数组长度.不要为其他数组分配额外空间,你必须使用 O(1) 的额外内存原地修改这个输入数组.元素的顺序可以改变.超过返回的新的数组长度以 ...

  9. (转)linux命令总结之ip命令

    linux命令总结之ip命令 原文:https://www.cnblogs.com/ginvip/p/6367803.html linux命令总结之ip命令   Linux的ip命令和ifconfig ...

  10. 利用Java程序将字符串进行排序与拼接

    1.初始生成字符串的代码程序: package com.map.test; import java.util.ArrayList; import java.util.Collections; impo ...