`
guochongcan
  • 浏览: 321033 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript窗口功能指南之打开一个新窗口

阅读更多

当你点击一个简单的链接打开一个新窗口时,你没有对新窗口任何控制权。浏览器以默认的功能打开新窗口。此外,你也不能使用JavaScript引用新窗口的window对象,因此你不可能操纵新窗口的属性。看看下面的JavaScript语句:

  window.open("http://www.docjs.com/", "win");

  这条语句打开一个新窗口,显示页面http://www.docjs.com/。 新窗口的名字被赋值为 "win"。window对象的open()方法的基本语法是:

  window.open(sURL, sName);

  2个参数都是可选的,如果不想指定URL或者窗口名称,就使用空字符串("").

  sURL 是一个字符串,它指定了要显示文档的URL。如果不指定URL,就产生一个空窗口。 sName 是定义的窗口名字,这个名字被用于<form>或者<a>标记的 TARGET 属性。在Internet Explorer 5 和以后版本,如果定义这个数值为 "_search",那么就将在浏览器的搜索区打开 sURL 。

  如果带有同一参数sName执行window.open()方法2次,会发生什么呢?就象用HTML产生的窗口一样,如果你定义一个已经存在窗口的名字,那么open()方法将简单地利用存在的窗口,而不是打开一个新的。看看下面的脚本程序:

  window.open("http://www.javascript.com/", "win");

  window.open("http://www.docjs.com/", "win");

  执行上面的语句,浏览器将打开一个名字为“win”的新窗口,并在其中显示页面www.javascript.com。第2条语句替换当前窗口内容为页面www.docjs.com。下面的语句产生2个不同的窗口显示各自的内容:

  window.open("http://www.javascript.com/", "win1");

  window.open("http://www.docjs.com/", "win2");

  如果不指定新窗口的名字,浏览器就自动地产生一个新窗口。这同样适用于“_blank”,但是空字符串是另外一回事。对于Internet Explorer和Navigator,有几个重要的区别,如下:

window.open("http://www.cnn.com/");
window.open("http://www.usatoday.com/");
Internet Explorer Navigator
打开2个不同的窗口 打开2个不同的窗口

window.open("http://www.cnn.com/", "_blank");
window.open("http://www.usatoday.com/", "_blank");
Internet Explorer Navigator
打开2个不同的窗口 打开2个不同的窗口

window.open("http://www.cnn.com/", "");
window.open("http://www.usatoday.com/", "");
Internet Explorer Navigator
打开2个不同的窗口 只打开一个窗口,名字为空("")

  下面一行不会用到,只是列举出来。如果想命名窗口,就给出一个可以理解的名字(不是"")。如果不想命名,就干脆不指定这个参数,或者使用特殊的target位置"_blank"。

  关于open()方法的一个重要之处是:open()方法几乎总是以window.open()的形式被调用执行,即使window代表了全局对象从而可以彻底省略。由于document对象也有open()方法,所以当我们想打开一个新窗口时,指定window对象将会清晰必要。在事件处理中,必须指定window.open(),而不能简单地使用open()。由于JavaScript中静态对象的作用范围限制,没有指定对象名字的open()调用等价于document.open()。比如说,当一个HTML按钮的事件处理发生时,范围就包含了按钮对象、表单对象、文档对象,以及窗口对象。这样,如果那样一个事件处理器引用了open()方法,识别器在文档对象就中止,事件处理器打开一个新的文档,而不是打开一个新的窗口。

返回值
  为了合适地引用子窗口,应该将window.open()的结果分配给一个变量。如果窗口被成功地创建,window.open()就返回新窗口对象,或者返回null表示创建失败(比如由于内存不足)。如果你的脚本程序需要引用新窗口的元素,返回值就是非常重要的。然而,当新窗口打开后,并没有“父-子”关系存在。看看下面的语句:

  var recentTips = window.open("http://www.docjs.com/tips/", "tips");

  这里,我们分配给新窗口的window对象一个变量值名叫recentTips。如果在函数中调用window.open()方法,记住一定要省略var关键字,因为变量应该是全局的。否则,window的引用就位于局部变量中,并且当函数执行完毕后就不能被访问。下面的语句在一个alert对话框中显示新窗口的URL:

  alert(recentTips.location.href);

  你也可以通过下面的方法改变新窗口的URL:

  recentTips.location.href = "http://www.usatoday.com/";

  在前面一节中,你已经看到了如何使用HTML链接和表单打开一个新窗口。通过指定target属性或者给window对象的name属性分配一个数值,我们就能够命名窗口。但是怎样才能通过它的html名字来引用存在的窗口呢?答案是简单的。如果你执行了带有空字符串的URL参数以及存在窗口名字的window.open()方法,这个窗口的引用就会被返回。看看下面的链接代码:

  <A HREF="http://www.cnet.com/" TARGET="news">CNET</A>

  当执行下面的语句时,就得到了新窗口的引用:

  var latestNews = window.open("", "news");

让我们再试一试。点击这个链接 CNET,但它装载后,点击下面的按钮:


  这个按钮实际上取回了名字叫做“news”的窗口的引用,并且修改了那个窗口的URL。注意,如果在点击按钮前不点击那个链接,一个新的、空的窗口就被装载(因为指定的窗口名字不存在)。记住,不管窗口中的文档是什么,窗口始终保持着它的名字。下面是这个按钮相关的HTML和JavaScript代码:

  <SCRIPT LANGUAGE="JavaScript">

  <!--

  function changeURL(winName, newURL) {

   win = window.open("", winName);

   win.location.href = newURL;

  }

  // -->

  </SCRIPT>

  <FORM>

  <INPUT TYPE="button" VALUE="Load ZDNet"

  onClick="changeURL('news', 'http://www.zdnet.com/')">

  </FORM>

  前面一段脚本程序表明了如何获取一个存在窗口的引用。如果你仅仅想改变存在窗口的URL,你同样可以直接使用目标页面的URL来调用window.open()方法:

  function changeURL(winName, newURL) {

   win = window.open(newURL, winName);

  }

  在下面一节中,我们将讨论如何定制新窗口的外观。

 

<a href="sdfaf" target="_blank">asdfsd</a>

分享到:
评论

相关推荐

    javascript个人技术笔记

    2 JavaScript窗口功能指南之打开一个新窗口; 3 JavaScript窗口功能指南之在窗口中书写内容; 4 利用弹出式窗口收集数据; 5 窗口对象的属性和方法; 。。。等等25个javaScript相关技术的DOC文档。希望对正在学习或...

    JavaScript窗口功能指南之在窗口中书写内容

    window.open()方法打开一个新窗口,document.open()方法打开一个新文档,在其中可以使用write()或者writeln()方法书写内容,它的语法是: oNewDoc = document.open(sMimeType[, sReplace]); sMineType...

    Tcl_TK编程权威指南pdf

    同学们在努力编制一个新式的内核程序,而John编写了一个新的编辑器和终端仿真程序。他使用Tcl作为这两种工具的命令语言,这样用户就可以定义菜单或者对那些程序进行定制。那时还处在使用X10的时代,他计划编写一个...

    1click-merge-windows:合并所有浏览器窗口的最快,最简单的方法!

    打开许多窗口(使用CTRL + N或在新窗口中打开链接) 单击扩展程序图标(安装后) 现在,您所有的窗口都将成为一个窗口。 太好了。 有关更多说明,请访问网站: : -此扩展程序是一个开源扩展程序。 这对您意味着...

    Ext JS 权威指南

    第2章介绍了ext js 4的获取、ext js库的配置与使用、语法、本地化,以及一个经典的入门示例;第3章详细讲解了调试的工具及技巧,这是本书的重要内容,希望所有web开发者都能掌握;第4章全面介绍了ext js的基础架构;...

    chrome.exe

    每个标签、窗口和插件都在各自的环境中运行,因此一个站点出了问题不会影响打开其它站点。通过将每个站点和应用软件限制在一个封闭的环境中这种架构,这进一步提高了系统的安全性。 速度快 使用WebKit引擎。WebKit...

    xheditor-1.1.14

    说明:控制弹出窗口是否显示上方的标题栏,默认为显示,若需要显示一个更定制个性化的iframe窗口,可通过此参数隐藏上方的标题栏 upBtnText:上传按钮的文字 参数值:任意字符串,默认值:“上传” 备注:1.0.0 beta2...

    RICO 1.1 附 prototype 1.4

    ·一个XMLHttpRequest应答能被路由到一个或者更多回叫操作,DOM对象,或者Javascript对象。 ·容易鼠标拖动支持。 ·Ajax动画,例如缩放和变换。 ·"行为"-实质上是窗口小组件库。 ·使用指南...

    new-tab:一个简单,漂亮的新标签页

    新标签 一个简单,漂亮的新标签页 与或使用时,其他浏览器的安装...“打开的新窗口”:“主页” “打开新标签页”:“首页” “主页”: /users/nchlswhttkr/new-tab/index.html Firefox(在开发人员版本上测试) $

    zabbix-matrix-webhook

    检索机器人的访问令牌在浏览器中打开一个私人/隐身窗口,然后使用漫游器帐户登录 : 打开漫游器帐户设置页面: 在设置页面中,打开“ Help & About选项卡,滚动到底部的“ Advanced部分,然后单击以检索访问令牌: ...

    asp.net知识库

    制作一个简单的多页Tab功能 一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标放在一个连接上,会显示图片(类似tooltip) 使用microsoft.web.ui...

    docs:ConfigCat文档的公共存储库。 ConfigCat是托管功能标记服务

    快速开始打开Terminal / CMD / PowerShell并将目录更改为/website cd website安装套件npm install跑步npm start浏览器窗口应自动打开。 如果没有,请访问: Do龙指南会费欢迎通过PR捐款。问题与支持我们很乐意帮助...

    klas-helper::carousel_horse:可以向KLASS网站添加便捷功能的用户脚本

    :carousel_horse: KLAS助手 | 在光云大学的KLAS网站上增加了便捷的功能。 由于它充当Tampermonkey扩展,因此...改善了观看演讲计划的不便之处(身份验证代码,在新窗口中打开等) 每学期自动计算主要成绩和非主要成

    crossframe-pendo:允许Pendo指南跨框架工作

    跨框架笔势 ... 只要在每个窗口中都初始化了crossframe-pendo,就应该支持iframe的任何配置(父级,子级,深度嵌套,具有共享父级的同级兄弟等)。 配置 初始化 可以通过window.crossframePendo访问crossf

    Firebug入门指南(Firefox浏览器)

     本文是Firebug的一个概览,并不对它的所有特性进行详尽解释。不过,本文的内容对一个新手来说,应该是足够了。    目录  一、安装Firebug  二、打开和关闭Firebug  三、Firebug窗口概览  四、随时编辑页面 ...

    【卷一/共两卷】AJAX实战pdf高清版90M

    附录B 面向对象程序员Javascript指南 B.1 JavaScipt不是Java B.2 JavaScript中的对象 B.2.1 创建即时对象 B.2.2 构造函数、类和原型 B.2.3 扩展内建类 B.2.4 原型的继承 B.2.5 JavaScijpt对象的反射 B.2.6 接口和...

    linkCue:linkCue-网站链接的待办事项列表。 使用流星

    ###功能清单 布局 添加类别 删除类别 类别选择 类别名称 添加链接网址 删除链接网址 编辑链接说明 获取链接元数据(流变刮擦包依赖性) 显示链接标题,描述,缩略图 链接网址验证 验证错误处理 类别和链接删除确认 ...

    electra-styleguide:Electra样式指南和样式库

    Electra风格指南 ...注意:故意将浏览器同步配置为在启动时不打开浏览器窗口。 只需访问或重新加载localhost:3000 (端口可能有所不同,但在CLI输出中已说明)即可访问实时视图。 建立小型资产: npm run build

    PERN-Advanced-Starter:高级PERN堆栈入门工具包(PostgresSQL,Express,React和Node),配有ESLint,Webpack 4,Redux,React-Router和Material-UI工具包

    打开一个终端窗口并创建一个新的PG数据库: $ createdb PERN-Starter然后,要开始使用此入门应用程序,请先分叉存储库: 然后将fork克隆到本地计算机上: $ git clone https://github.com/*YOUR-

Global site tag (gtag.js) - Google Analytics