JavaScript FAQ(八)——窗口(Window)

简介:  六、窗口 1. 打开一个窗口(Opening a window)Q:我如何打开一个新的浏览器窗口?A:可以使用window.open()方法,打开一个新浏览器窗口。例如,下面的代码就在一个新窗口中显示当前页。

 六、窗口

 

1. 打开一个窗口(Opening a window

Q:我如何打开一个新的浏览器窗口?

A:可以使用window.open()方法,打开一个新浏览器窗口。例如,下面的代码就在一个新窗口中显示当前页。

 

myRef = window.open(''+self.location,'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); 

window.open()方法的一般语法如下:

winRef = window.open( URL, name [ , features [, replace ] ] )

存储在变量winRef中的返回值是对新窗口的引用。在稍后可以使用这个引用,例如,关闭这个窗口( winRef.close()),把焦点定位到窗口( winRef.focus())或者执行其他窗口操作。

参数URL、name、feature、replace的意义分别为:

URL  Sring,用来指定要在新窗口打开的页面的地址。如果你不想指定地址,可以传递一个空字符串(如当你想在新窗口中写一些由脚本产生的内容时)。

name   String,用来指定新窗口的名字。这个名字的用法和在框架中的框架名字的用法一样。例如,可以在表单的超链接中使用<a traget=name fref="page.htm">,那么这个超链接的目标页面就会在新窗口中显示。

如果同样名字的窗口已经存在,那么window.open()会在已经存在的窗口中显示新内容,而不再新建一个窗口。

features   String,可选参数,用来指定新窗口的特性。features字符串可能包含一个或多个由逗号分割的feature=name对。

replace    boolean,可选参数。如果为true,新内容为替换在浏览器导航历史中的当前页。注意:有些浏览器会忽略这个参数。

 

下面的特性在多数浏览器上可用:

toolbar = 0|1   指定新窗口中是否显示工具条。

location = 0|1  指定新窗口中是否显示地址栏。

directories = 0|1 指定新窗口中是否显示Netscape的文件夹按钮。

status = 0|1   指定新窗口中是否显示状态栏。

menubar = 0|1   指定新窗口中是否显示浏览器菜单栏。

scrollbar = 0|1   指定新窗口中是否应该有滚动条。

resizable = 0|1  指定新窗口是否可以重置大小。

width = pixels   指定新窗口的宽度。

height = pixels  指定新窗口的高度。

top = pixels   指定新窗口左上角的Y坐标(在版本3浏览器中不支持)。

left = pixels   指定新窗口左上角的X坐标(在版本3浏览器中不支持)。

 

2. 关闭窗口(Closing a window

Q:我如何关闭一个窗口?

A:要关闭在前面通过脚本打开的窗口,可以使用window.close()方法,例如:

winRef.close();

上面的winRef是由window.open()方法返回的窗口引用。这里的gotcha是,当你的脚本试图关闭winRef应用的窗口时,它并一定存在。(用户可能已经关闭了!)那么如果窗口不再存在,脚本就会发生错误。可能的解决办法有:

  • 重新打开同样winRef和name的窗口
  • 把关闭窗口代码只放在窗口要被关闭的地方。这种情况下,窗口的引用就是自己了(self),即self.close()。
  • 在尝试关闭前测试窗口是否依然处于打开状态。

如果你的脚本尝试关闭由用户打开的主窗口时,多数的浏览器都会弹出一个窗口询问用户是否允许脚本关闭这个浏览器窗口。你自己测试一下:这是一个试图关闭你的浏览器窗口的脚本。

 

3. 重置窗口大小(Resizing a window

Q:我如何重置窗口大小?

A:在Netscape Navigator 4或者Internet Explorer 4(译者注:及以后版本)上,你可以使用window.resizeTo(newWidth, newHeight)或者window.resizeBy(DX, DY)方法重置窗口大小。

注意,旧版本的浏览器不支持这些方法。最好的解决方法是可能是“在旧版本浏览器上什么都不做”。例如,下面的代码在新版本浏览其中会将窗口重置为600x400,而在旧版本中也不会引起错误:

if (parseInt(navigator.appVersion)>3)
  top.resizeTo(600,400);

注意,resizeTo()的参数在不同浏览器上有不同的意思:在Internet Explorer上它们指定外窗口大小,而在Netscape Navigator中指定内窗口的大小(不包括窗口边框、工具栏、状态栏、标题栏和地址栏)。如果要在所有浏览器上都重置为同样外窗口大小,可以使用这个函数:

function resizeOuterTo(w,h) {
 if (parseInt(navigator.appVersion)>3) {
   if (navigator.appName=="Netscape") {
    top.outerWidth=w;
    top.outerHeight=h;
   }
   else top.resizeTo(w,h);
 }
}


 

4. 最大化窗口(Maximizing a window

Q:我如何最大化窗口?

A:要最大化窗口,你的代码首先应该确定可用的屏幕尺寸,那么将窗口重置为用户屏幕尺寸大小。注意,没有可靠的方法在版本3的主流浏览器中检测屏幕大小(除了从Navigator 3.x中调用Java)。因此,下面的示例函数maximizeWindow()只能工作在4或者更新版本上。试一下:

源码是:

function maximizeWindow() {
 if (parseInt(navigator.appVersion)>3) {
  if (navigator.appName=="Netscape") {
   if (top.screenX>0 || top.screenY>0) top.moveTo(0,0);
   if (top.outerWidth < screen.availWidth)
      top.outerWidth=screen.availWidth;
   if (top.outerHeight < screen.availHeight) 
      top.outerHeight=screen.availHeight;
  }
  else {
   top.moveTo(-4,-4);
   top.resizeTo(screen.availWidth+8,screen.availHeight+8);
  }
 }
}


两条备注:

1. 在Windows中,最大化一个窗口相当于

  • 移动窗口的左上角到点x=-4, y=-4
  • 将窗口大小重置为屏幕大小加上8像素(在水平和竖直两个维度)

这就会隐藏窗口的边框。不幸的是,Netscape Navigator4要求签名的脚本才能把窗口左上角移出屏幕,因此上述(未签名)脚本的结果是窗口边框清晰可见。(在改变窗口时,Netscape的相关分支脚本会检测窗口是否已经最大化。如果是,则保持原样)。

2. 还需要注意,JavaScript代码不能改变最大化按钮(右上角的第二个按钮)的样式。

 

5. 写入窗口(Writing to a window

Q:我如何把脚本生成的内容写入到另一个窗口中?

A:可以使用winRef.document.write()winRef.document.writeln()方法将脚本生成的内容写入到另一个窗口中。例如,下面的函数打开一个标题为Console的新窗口,然后把指定的内容写入其中。


writeConsole('Hello from JavaScript!');
function writeConsole(content) {
 top.consoleRef=window.open('','myconsole',
  'width=350,height=250'
   +',menubar=0'
   +',toolbar=1'
   +',status=0'
   +',scrollbars=1'
   +',resizable=1')
 top.consoleRef.document.writeln(
  '<html><head><title>Console</title></head>'
   +'<body bgcolor=white onLoad="self.focus()">'
   +content
   +'</body></html>'
 )
 top.consoleRef.document.close()
}

在上面的例子中,你可能已经注意到在向console写入几次内容后,console窗口允许你在输出的历史中来回。这并不是一个一直都需要的功能。如果你想把输出内容而不创建历史,把下面的操作放在窗口打开之后(和第一次写入之前):
docRef = top.winRef.document.open("text/html","replace");
这里的winRef是由window.open()方法返回的窗口引用,docRef是一个全局变量,作为脚本对新文档的引用。

 

6. 我的窗口还在吗?(Is my window still open?

Q:我如何测试我的窗口是否还在呢?

A:我们假设你使用window.open()方法打开了一个新的浏览器窗口

winRef = window.open( URL, name, features )
接着,你可以使用 window.closed属性测试这个窗口是否人仍旧打开:

if (winRef.closed) alert ("It's closed!")
else alert ("It's still open!")

window.closed属性在Netscape Navigator 2或者Internet Explore 3中不被支持。要避免出现错误信息,你可以把上面的代码放在一个条件语句中,如下:

if (parseInt(navigator.appVersion>2)) {
if (winRef.closed) alert ("It's closed!")
else alert ("It's still open!")
}

(Internet Explore 3报告它的版本是2,所以这个包含 navigator.appVersion的条件对于Navigator 3或者更高以及Internet Explorer 4或者更高都是 true。)

对于旧版本的浏览器没有简单的解决方法。你可能想使用onUnload事件处理器来模拟window.closed属性。然而,必须注意,unload事件并不等价于关闭窗口。例如,当然用户离开原始页面去别的页面时也会触发该事件(而窗口依然打开着)。

 

7. 窗口标题(Window title

Q:我如何更改另一个窗口的标题,也就是,窗口最顶端标题栏的内容?

A:为了更改窗口标题,你的脚本写入窗口的字符串可以用下面的内容开头:

'<html><head><title>Your new title here</title></head>'
注意,重写其他窗口的内容会抹去窗口中先前显示的所有内容。因此,如果你想窗口的内容仍然存在,那么,在改变窗口标题后,就需要重写一次窗口的内容。(如果你的脚本不知道旧的内容是什么,那么你最后不要改变窗口标题!)

关于向窗口写入脚本生成的内容的更多信息,参考写入窗口

目录
相关文章
|
25天前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
36 1
|
4月前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
4月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
28 1
|
9月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
|
5月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
34 0
|
8月前
|
前端开发 JavaScript 安全
使用原生JavaScript对网页或窗口进行截图
要使用原生 JavaScript 对整个网页或窗口进行截图,你可以使用 html2canvas 库。 html2canvas 是一个强大的 JavaScript 库,可以将网页的可见部分渲染为 <canvas> 元素,并且可以保存为图像。
232 0
|
10月前
|
JavaScript 前端开发
获取屏幕、窗口和网页尺寸, 用JavaScript
本教程介绍了如何使用JavaScript获取屏幕、窗口和网页的尺寸。通过对不同尺寸的定义和访问方法进行解释,帮助读者更好地理解各种尺寸的含义和用途。
237 0
|
10月前
|
JavaScript 前端开发
JavaScript窗口(window)对象介绍
JavaScript窗口(window)对象介绍
88 0
|
10月前
|
JavaScript 前端开发
|
10月前
|
JavaScript 前端开发