用户点击某个链接时弹出一个新窗口
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. 洛谷P1275 魔板

    P1275 魔板 题目描述 有这样一种魔板:它是一个长方形的面板,被划分成n行m列的n*m个方格.每个方格内有一个小灯泡,灯泡的状态有两种(亮或暗).我们可以通过若干操作使魔板从一个状态改变为另一个状 ...

  2. Tomcat热部署的实现原理

    Tomcat热部署机制 对于Java应用程序来说,热部署就是在运行时更新Java类文件.在基于Java的应用服务器实现热部署的过程中,类装入器扮演着重要的角色.大多数基于Java的应用服务器,包括EJ ...

  3. jmeter-逻辑控制器之 交替控制器（实现2个请求每次只执行其中一个）

    交替控制器: 案例:两个请求每次只能执行其中一个,可使用交替控制器. 1.线程组->添加->逻辑控制器->交替控制器 2.在控制下添加两个http请求.运行的时候第一次循环执行第一个 ...

  4. 压缩归档tar

    一:压缩.解压 1.compress/uncompress/zcat -d:解压 -c:输出到终端,不删除原文件 -v:显示详细信息 2.gzip/ungzip/zcat -d:解压 -c:将压缩或解 ...

  5. HTTP header parsing errors will be logged at DEBUG level

    -- ::-exec-] INFO org.apache.coyote.http11.Http11Processor - Error parsing HTTP request header Note: ...

  6. Java中文编程开发，让Java编写更改复杂

    额?what? 在B站无意中看到一张图,无意间已发了自己的好奇,实际上我早就知道Java支持Unicode编码也就是可以使用中文命名规则,但是我们可以包装一下,玩一玩完全使用中文编码也未尝不可,但是经 ...

  7. mysql执行计划 const eq_ref ref range index all

    explain:查询查询性能或者需要查看使用索引状态 一.type:连接类型  最关键的一列  效率(const>eq_ref>ref>range>index>all) ...

  8. jquery——属性操作、特殊效果

    1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. 从HTML form submit 到 django response是怎么完成的

    HTML form 里的数据是怎么被包成http request 的?如何在浏览器里查看到这些数据? 浏览器做的html数据解析 form里的数据变成name=value对在POST Body中 re ...

  10. View转换为Bitmap及getDrawingCache

    View组件显示的内容可以通过cache机制保存为bitmap, 使用到的api有 void  setDrawingCacheEnabled(boolean flag),    Bitmap  get ...