六、窗口
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 Explorer4(译者注:及以后版本)上,你可以使用window.resizeTo(newWidth, newHeight)或者window.resizeBy(DX, DY)方法重置窗口大小。
注意,旧版本的浏览器不支持这些方法。最好的解决方法是可能是“在旧版本浏览器上什么都不做”。例如,下面的代码在新版本浏览其中会将窗口重置为600x400,而在旧版本中也不会引起错误:
if (parseInt(navigator.appVersion)>3)
top.resizeTo(600,400);
注意,resizeTo()的参数在不同浏览器上有不同的意思:在Internet Explorer上它们指定外窗口大小,而在Netscape Navigator中指定内窗口的大小(不包括窗口边框、工具栏、状态栏、标题栏和地址栏)。如果要在所有浏览器上都重置为同样外窗口大小,可以使用这个函数:
-
functionresizeOuterTo(w,h){
-
if(parseInt(navigator.appVersion)>3){
-
if(navigator.appName=="Netscape"){
- top.outerWidth=w;
- top.outerHeight=h;
- }
-
elsetop.resizeTo(w,h);
- }
- }
-
4. 最大化窗口(Maximizing a window)
Q:我如何最大化窗口?
A:要最大化窗口,你的代码首先应该确定可用的屏幕尺寸,那么将窗口重置为用户屏幕尺寸大小。注意,没有可靠的方法在版本3的主流浏览器中检测屏幕大小(除了从Navigator 3.x中调用Java)。因此,下面的示例函数maximizeWindow()只能工作在4或者更新版本上。试一下:
源码是:
-
functionmaximizeWindow(){
-
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('HellofromJavaScript!');
-
functionwriteConsole(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>'
-
+'<bodybgcolor=whiteonLoad="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>'
注意,重写其他窗口的内容会抹去窗口中先前显示的所有内容。因此,如果你想窗口的内容仍然存在,那么,在改变窗口标题后,就需要重写一次窗口的内容。(如果你的脚本不知道旧的内容是什么,那么你最后不要改变窗口标题!)
关于向窗口写入脚本生成的内容的更多信息,参考写入窗口。
分享到:
相关推荐
JavaScript FAQ函数是一种常见的网页交互设计,它用于实现FAQ(常见问题解答)页面中问题与答案的展开和隐藏功能。在用户点击某个问题时,对应的答案会显示出来,而其他未被点击的问题答案则保持隐藏状态,以此提高...
这个压缩包“JavaScript_初学者文件,最终项目和FAQ为我的终极React课程.zip”显然是为了帮助初学者掌握JavaScript以及进阶到React框架的知识而设计的。React是Facebook推出的一个用于构建用户界面的JavaScript库,...
前端负责用户交互,可能使用React、Vue.js等现代JavaScript框架;后端处理业务逻辑和数据操作,可能选择Node.js、Python的Django或Flask框架,或者是Java的Spring Boot。数据库方面,MySQL或PostgreSQL是常用的选择...
前台获取内存数据通常通过JavaScript或Vue等前端框架实现,需要了解对应框架的API。可能涉及到的数据源包括本地存储、组件状态或全局变量。 **FAQ10:新配置的FC未被调用** 新配置的功能组件(FC)未调用可能因为配置...
同时,为了实现多语言或动态加载的FAQ,我们可以将问题和答案存储在JSON对象中,然后在JavaScript中动态生成HTML结构。这将使我们的代码更灵活,便于维护和扩展。 此外,考虑到性能和可访问性,我们应该避免对大量...
这个项目可能是一个基于JQ(可能是jQuery或者其他JavaScript库)的问题与解答(FAQ)系统,或者是一个用于处理FAQ数据的工具。尽管文件格式没有明确指定,但我们可以根据文件名推测这可能是一个代码仓库的主分支。 ...
6. **结构化数据**:FAQ页面通常包含多条问题和答案,可以考虑将它们存储在JSON格式的数据中,然后在JavaScript中解析并动态渲染到页面上。这样做可以方便地管理和更新内容。 7. **响应式设计**:为了让FAQ列表在...
本教程将详细介绍如何使用JavaScript实现简单的FAQ折叠效果。 首先,我们需要在HTML中构建FAQ的基础结构。每个问题-答案对应该包裹在一个容器内,例如`<div>`,并为问题和答案设置不同的CSS类。例如: ```html ...
在IT行业中,jQuery是一种广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本文将详细探讨"可展开和收缩的jQuery FAQ问答列表特效"这一主题,以及它在实际应用中的相关知识点。 首先...
在压缩包中的文件"jiaoben286"可能是示例代码或一个项目文件,可能包含了实现这种CSS3列表FAQ问答特效的具体HTML结构、CSS样式以及JavaScript代码。通过查看和分析这些文件,你可以更深入地理解如何将这些技术应用于...
【标题】"FAQ管理全源代码 .rar_FAQ" 提供的是一个完整的FAQ(常见问题解答)管理系统的所有源代码。这个系统设计用于帮助用户高效地处理和管理与产品或服务相关的常见问题及其解答,提高客户支持和服务的质量。通过...
【jQuery FAQ可收缩手风琴】是一种常见的网页交互设计元素,它通过使用jQuery库实现了一个功能丰富的FAQ(常见问题解答)部分。这个设计允许用户点击问题标题,展开对应的答案,以此来节省页面空间并提高用户体验。...
在FAQ列表中,JavaScript可能被用来处理用户交互,比如当用户点击问题时,JavaScript可以控制相应的答案区域的显示和隐藏,实现动态展开和收起。同时,它还可以实现其他功能,如验证用户输入,或者在无刷新页面的...
"简单实用的jQuery FAQ手风琴特效"就是一种增强网站用户互动性的技术,它常用于常见问题解答(FAQ)部分,使得大量的信息可以以紧凑且易于浏览的方式呈现。这篇文章将深入探讨jQuery手风琴特效的原理、实现方法以及...
在网页开发中,jQuery作为一个强大的JavaScript库,极大地简化了DOM操作、事件处理和动画制作。对于开发者而言,掌握jQuery的常见问题和解决方法,以及如何创建吸引人的FAQ(常见问题解答)特效,是提升网站用户体验...
**jQuery和CSS3 FAQ问答页面模板详解** 在网页设计中,FAQ(常见问题解答)页面是必不可少的一部分,它能够提供用户快速找到问题解决方案的途径。本文将深入探讨一个基于jQuery和CSS3的FAQ问答页面模板,它具有人性...
总结起来,这个“FAQ可收缩jquery手风琴导航”项目涵盖了前端开发的核心技术:HTML5用于构建网页结构,CSS负责样式和动画,JavaScript与jQuery库实现了交互功能。通过深入学习和实践这些技术,开发者可以创建出更加...
在IT行业中,JSP(JavaServer Pages)是一种用于创建动态网页的技术,它是Java平台的一部分,提供了将HTML、CSS和JavaScript与服务器端Java代码相结合的能力。本FAQ(Frequently Asked Questions,常见问题解答)...
《使用jQuery实现FAQ问答展开与折叠的技巧》 ...结合HTML、CSS和JavaScript,我们可以创建出既美观又实用的交互式FAQ模块。在实际开发中,根据项目需求,可以进一步定制和扩展这些基础功能,以满足更多个性化的需求。