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

 六、窗口

 

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

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

时间: 2024-08-02 09:40:45

JavaScript FAQ(八)——窗口(Window)的相关文章

JavaScript FAQ(四)——导航功能增强

 二.导航功能增强   1. 下拉菜单中的链接(Links in Select Menu) Q:我如何实现在下拉菜单中链接到不同的页面? A:要创建一个所示的下拉菜单:选择一个页面JavaScript FAQNumbersStringsNavigationColorsJavaScripter.net 你可以使用下面的代码: <form> <select onChange="if(this.selectedIndex!=0) self.location=this.options[

制作Javascript弹出窗口技巧九则

javascript|弹出窗口|技巧 经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段Javascript代码即可实现.下面俺就带您剖析它的奥秘. 1.最基本的弹出窗口代码 其实代码非常简单: < SCRIPT LANGUAGE="javascript"> < !

Javascript 弹出窗口延迟

javascript|弹出窗口 弹出窗口时间延迟  源码如下------------------------------- 脚本说明:把如下代码加入<body>区域中<SCRIPT language=JavaScript><!--function mywin1(){mywindow1 = window.open('8.htm','myexample1','width=200,height=200');mywindow1.location.href = '9.htm';}fun

网页设计:javascript弹出窗口问题总结

javascript|弹出窗口|设计|网页|网页设计|问题 作者:罗代均,ldj_work#126.com ,转载请保持完整性. 1.无提示刷新网页     大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了.如果页面没有form,则不会弹出提示窗口如果页面有form表单,       a)<form  method="post" ...>             会弹出提示窗口

javascript弹出窗口问题总结

1.无提示刷新网页 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了.如果页面没有form,则不会弹出提示窗口如果页面有form表单, a)<form method="post" ...> 会弹出提示窗口 b)<form method="get" ...> 不会弹出 2 javascript刷新页面的方法 window.location.relo

JavaScript使用HTML5的window.postMessage实现跨域通信例子

 这篇文章主要介绍了JavaScript使用HTML5的window.postMessage实现跨域通信例子,需要的朋友可以参考下 JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多:  1.document.domain+iframe的设置,应用于主域相同而子域不同:  2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限  3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SW

javascript弹出窗口大全

[1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"> window.open ('page.html') </SCRIPT> 因为着是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间.<!-- 和 -->是对一些版本低的浏览器起作用,在这些a老浏览器中不会将标签中

23个Javascript弹出窗口特效整理_javascript技巧

1. Lightview Lightview是一个基于Prototype与Script.aculo.us开发,用于创建可以覆盖整个页面的模式对话框.展示的内容不仅可以是图片.文字.网页.通过Ajax 调用的内容,还可以是Quicktime/Flash影片都能够以非常酷的效果展示. 2. ThickBox (演示地址) ThickBox是一个模式对话框UI控件.基于jQuery开发,可以用来展示单张或多张图片,内嵌的内容,iframed的内容,或通过Ajax获取的内容. 3. Fonshen JS

JavaScript浏览器对象之一Window对象详解_基础知识

JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制.JavaScript中定义了6种重要的对象: window对象 表示浏览器中打开的窗口: document对象 表示浏览器中加载页面的文档对象: location对象包含了浏览器当前的URL信息: navigation对象 包含了浏览器本身的信息: screen对象 包含了客户端屏幕及渲染能力的信息: history对象 包含了浏览器访问网页的历史信息. 除了window对象之外,其他的5个对象都是windo

JavaScript弹出窗口方法汇总_javascript技巧

本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新. 而有的页面不会提示,不弹出提示窗口,直接就刷新了. 如果页面没有form, 则不会弹出提示窗口 如果页面有form表单, a)<form  method="post" ...>     会弹出提示窗口 b)<form  method=&quo