曲径通幽论坛

标题: open() -- 打开窗口 [打印本页]
作者: easy    时间: 2013-4-24 13:38
标题: open() -- 打开窗口
open() 方法可以打开一个新窗口，并在其中加载一个新的文档。虽然 <a> 标签将 target  属性值设为 _blank 也可以打开一个新窗口，但只能在超链接中打开新窗口，因此局限性较大。

使用 open() 方法打开新窗口可以使用在任何一个对象上，它通常会与 click 事件结合使用。

open() 方法语法格式如下：
window.open([url], [windowName], [features], [replace])
url : 在新窗口中加载的文档 URL，该参数为可选，可省略。

windowName : 新窗口的名称。该名称可以在 <a> 标签或 <form> 标签中的 target 属性值中使用。如果名为 windowName 的窗口已经存在，那么在该窗口中打开 url 所指定的文档；若不存在，则新开一个窗口，它也是个可选参数。

features : 新开窗口的特征。可以设置新开窗口是否显示工具栏，菜单栏等。该参数也是个可选参数，若是省略，那么显示所有标准特征。如果 windowName 窗口已经存在，那么该参数设置无效。

replace : 该参数是个布尔值，用于设置是否覆盖当前窗口的浏览历史记录。该参数只有在名为 windowName 窗口已经存在的情况下才起作用。如果该参数为 true ，那么使用 url 来替换该窗口浏览历史的当前项，否则在浏览历史中创建一个新项。

open() 方法的返回值是一个 window 对象。在使用 open() 方法时，windowName 窗口不存在，那么创建一个 window 对象并返回；如果 windowName 已经存在，那么返回对该窗口的 window 对象的引用。

1. 打开一个空白窗口

<html>

<head>
  <title>打开一个空白窗口</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
  <input type="button" onclick="window.open()" value="新建一个窗口">
</body>

</html>


2. 打开一个新窗口的同时，并加载一个文档

<html>

<head>
  <title>打开一个空白窗口</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
  <input type="button" onclick="window.open('http://www.groad.net')" value="打开曲径通幽">
  <br><br>

  <a href="http://www.groad.net" target="_blank"> <xmp>使用 <a> 标签打开新窗口</xmp></a> <br><br>

</body>

</html>

3. 在命名窗口中打开文档
通过 windowName 参数给一个窗口命名，如果命名窗口不存在，则新开一个窗口打开，这个和 <a> 标签的 target 属性有点相似。

<html>
<head>
  <title>在命名窗口中打开文档</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
  <input type="button" onclick="window.open('http://www.groad.net', 'buttonWin')" value="打开曲径通幽">
  <input type="button" onclick="window.open('http://www.baidu.com', 'buttonWin')" value="打开百度">

</body>

</html>
该页面有两个按钮，一个是“打开曲径通幽”，另一个是“打开百度”。如果还未曾单击任一个按钮，那么在你点击其中任一个时，都会打开一个新的窗口用以装载对应的页面，同时会被命名为 buttonWin 。然后再点击另外一个按钮时，会在已打开的那个窗口里装载相应的页面。这是因为它指定装载的窗口名为 buttonWin ，而这个窗口已经被建立。



欢迎光临 曲径通幽论坛 (http://www.groad.net/bbs/) Powered by Discuz! X3.2