window.open()支持环境:
JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
基本语法:
window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)
window.open(url, name, features, replace)
Arguments - 参数
url
可选字符串参数,指向要在新窗口中显示的文档的URL。如果省略该参数,或者参数为空字符串,新窗口不会显示文档。
name
可选字符串参数,该参数可以设置新窗口的名称。
相同name的窗口只能创建一个,要想创建多个窗口则name不能相同。
features
可选字符串参数,该参数用于设定新窗口的功能。因为该参数是可选的,如果没有指定该参数,新窗口有所有的标准功能。
replace
可选布尔参数,设置新窗口中的操作历史的保存方式。
true - 创建新历史记录
false - 替换旧的历史记录
编辑本段返回值 一个根据name参数对新创建的或已存在的窗口对象的引用。
编辑本段描述 open()方法可以查找一个已经存在的或者新建的浏览器窗口。如果name参数指定了一个已经存在的浏览器窗口,则返回对该窗口的引用。 返回的窗口中将显示URL中指定的文档,但是features参数会被忽略。open()方法是JavaScript中唯一通过名称获得浏览器窗口引用的途径。
如果没有指定name参数,或者不存在name参数指定的名称的窗口,open()方法将创建一个新的浏览器窗口。
name参数用于指定新窗口的名称, 该名称必须由字母、数字和下划线字符组成。它可以被HTML文档中的<a>标记或<form>标记指向。
当你使用window.open()方法加载一个新的文档到一个已经存在了命名的窗口中时,你可以通过replace参数设置历史记录的保存方式.。如果该参数是true, 新文档的历史记录将取代旧文档的历史记录。 如果该参数为false或这没有指定该参数, 新的文件在窗口的浏览历史记录中将建立自己的条目。 该参数提供了location.replace()相同功能的方式。
不要把"Window.open( ) "和"Document.open( )"混淆;这是两个完全不一样的方法。为了让代码更明晰, 你可以用"Window.open( )"代替 "open( )"。 作为HTML属性定义事件处理程序时, "open( )" 一般被解释为"Document.open( )",所以在这种情况下, 你必须使用"Window.open( )"。
编辑本段窗口特性 feature参数是一个用逗号分隔的功能列表。如果该参数为空或者没有指定该参数,新的窗口将拥有所有的功能。另一方面, 如果feature参数只指定了某一项或某几项功能,那么其他没有被指定的功能将不会出现在新的窗口中。该字符串不能包含任何空格或其它空字符串。
列表中的每个元素的格式:功能[=值]
对于绝大多数的功能来说,它们的值一般都是yes或no。对这些功能,等号和值都可以省略不写。 对于 width和height特性, 必须给它们指定一个以像素为单位的值。
以下是一些普遍支持的功能和它们的含义:
alwaysLowered
Internet Explorer:不支持
Navigator:版本 4+
指定窗口总是保留在堆栈的最下面。换言之,不管新窗口是否激活,总是其他窗口下。
window.open("alwayslowered.html", "_blank", "alwaysLowered");
alwaysRaised Internet Explorer:不支持
Navigator:版本 4+
指定窗口总是保留在堆栈的最上面。换言之,不管新窗口是否激活,总是其他窗口上。
window.open("alwaysraised.html", "_blank", "alwaysRaised");
channelmode
Internet Explorer:版本 4+
Navigator:不支持
指定是否按照剧场模式显示窗口,以及是否显示频道区。
window.open("channelmode.html", "_blank", "channelmode");
dependent
Internet Explorer:不支持
Navigator:版本 4+
定义是否窗口成为当前打开窗口的依赖子窗口。依赖窗口就是当它的父窗口关闭时,它也随即关闭。在windows平台上,一个依赖窗口不会在任务栏上显示。
window.open("dependent.html", "_blank", "dependent");
directories
Internet Explorer:所有版本
Navigator:所有版本
指定是否显示目录按钮(比如众所周知的"What's Cool" and "What's New" 按钮)。Internet Explorer将这些目录按钮引用为链接工具栏,Navigator(版本4和以上)称之为个人工具栏。
window.open("directories.html", "_blank", "directories");
fullscreen
Internet Explorer:版本 4+
Navigator:不支持
定义是否按照全屏方式打开浏览器。请小心使用全屏模式,因为在这种模式下,浏览器的标题栏和菜单都被隐藏,所有你应该提供一个按钮或者其他可视的线索来帮助用户关闭这个窗口。当然,使用热键ALT+F4也能关闭窗口。
window.open("fullscreen.html", "_blank", "fullscreen");
height
Internet Explorer:所有版本
Navigator:所有版本
以象素pixel为单位定义窗口文档显示区域的高度,最小数值是100。如果仅仅定义高度,Internet Explorer使用给定的高度和默认的宽度。对于Navigator,如果不同时指定width或者innerWidth,那么就将忽略这个属性。
window.open("height.html", "_blank", "height=200,width=300");
hotkeys
Internet Explorer:不支持
Navigator:版本 4+
如果没有定义(或者为0),那么就屏蔽了没有菜单条的新窗口的大部分热键。但是安全以及退出热键仍然保留。
window.open("hotkeys.html", "_blank", "hotkeys=0,menubar=0");
innerHeight
Internet Explorer:不支持
Navigator:版本 4+
以象素pixel为单位定义窗口文档显示区域的高度,最小数值是100。在Navigator版本4中,这个特征替换height,为得是保持向后兼容。对于Navigator,如果不同时指定width或者innerWidth,那么就将忽略这个属性。
window.open("innerheight.html", "_blank", "innerHeight=200,innerWidth=300");
innerWidth
Internet Explorer:不支持
Navigator:版本 4+
以象素pixel为单位定义窗口文档显示区域的宽度,最小数值是100。在Navigator版本4中,这个特征替换width,为得是保持向后兼容。对于Navigator,如果不同时指定height或者innerHeight,那么就将忽略这个属性。
window.open("innerwidth.html", "_blank", "innerHeight=200,innerWidth=300");
left
Internet Explorer:版本 4+
Navigator:不支持
以象素为单位定义窗口的X左标。
window.open("left.html", "_blank", "left=20");
location
Internet Explorer:所有版本
Navigator:所有版本
定义是否显示浏览器中供地址URL输入的文本域。
window.open("location.html", "_blank", "location");
menubar
Internet Explorer:所有版本
Navigator:所有版本
定义是否显示菜单条(菜单条位于窗口顶部,包括“文件”和“编辑”等)。
window.open("menubar.html", "_blank", "menubar");
outerHeight
Internet Explorer:不支持
Navigator:版本 4+
以象素为单位定义窗口(它的外部边界)的总高度,最小数值比100多一些,因为窗口内容区域的高度必须至少是100。如果没有同时定义outerWidth,Navigator将忽视这个特征。
window.open("outerheight.html", "_blank", "outerHeight=200,outerWidth=300");
outerWidth
Internet Explorer:不支持
Navigator:版本 4+
以象素为单位定义窗口(它的外部边界)的总宽度,最小数值比100多一些,因为窗口内容区域的宽度必须至少是100。如果没有同时定义outerHeight,Navigator将忽视这个特征。
window.open("outerwidth.html", "_blank", "outerHeight=200,outerWidth=300");
resizable
Internet Explorer:所有版本
Navigator:所有版本
定义是否窗口可以通过它的边界进行大小缩放控制。依赖于平台不同,用户也许还有其他改变窗口大小的方法。
window.open("resizable.html", "_blank", "resizable");
screenX
Internet Explorer:不支持
Navigator:版本 4+
以象素为单位定义窗口的X坐标。
window.open("screenx.html", "_blank", "screenX=20");
screenY
Internet Explorer:不支持
Navigator:版本 4+
以象素为单位定义窗口的Y坐标。
window.open("screeny.html", "_blank", "screenY=20");
scrollbars
Internet Explorer:所有版本
Navigator:所有版本
定义是否激活水平和垂直滚动条。
window.open("scrollbars.html", "_blank", "scrollbars");
status
Internet Explorer:所有版本
Navigator:所有版本
定义是否在窗口的下部添加状态栏。
window.open("status.html", "_blank", "status");
titlebar
Internet Explorer:Version 5+
Navigator:版本 4+
定义是否显示窗口的标题栏。在Internet Explorer中,除非调用者是一个HTML应用程序或者一个可信任的对话框,那么这个特征是被屏蔽的。
window.open("titlebar.html", "_blank", "titlebar=0");
toolbar
Internet Explorer:所有版本
Navigator:所有版本
定义是否显示浏览器的工具栏(位于窗口的上部,包括“后退”和“向前”)。
window.open("toolbar.html", "_blank", "toolbar");
top
Internet Explorer:版本 4+
Navigator:不支持
以象素为单位定义窗口的纵坐标。
window.open("top.html", "_blank", "top=20");
width
Internet Explorer:所有版本
Navigator:所有版本
以象素pixel为单位定义窗口文档显示区域的宽度,最小数值是100。如果仅仅定义宽度,Internet Explorer使用给定的宽度和默认的高度。对于Navigator,如果不同时指定height或者innerHeight,那么就将忽略这个属性。
window.open("width.html", "_blank", "height=200,width=300");
z-lock
Internet Explorer:不支持
Navigator:版本 4+
定义窗口激活时不在堆栈中浮起,就是说,新窗口当被激活时并不能位于其他窗口之上。
window.open("zlock.html", "_blank", "z-lock");
编辑本段示例
1、最基本的弹出窗口代码
其实代码非常简单:
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html')
-->
</SCRIPT>
因为着是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
Window.open ('page.html') 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HTML的任意位置,<head>和</head>之间可以,<body>间</body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//写成一行
-->
</SCRIPT>
参数解释:
<SCRIPT LANGUAGE="javascript"> js脚本开始;
window.open 弹出新窗口的命令;
'page.html' 弹出窗口的文件名;
'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
Resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
</SCRIPT> js脚本结束
【3、用函数控制弹出窗口】
下面是一个完整的代码。
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//-->
</script>
</head>
<body>
…任意的页面内容…
</body>
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢?
方法一:<body> 浏览器读页面时弹出窗口;
方法二:<body> 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:
<a href="#">打开一个窗口</a>
注意:使用的"#"是虚连接。
方法四:用一个按钮调用:
<input type="button" value="打开窗口">
【4、同时弹出2个窗口】
对源代码稍微改动一下:
<script LANGUAGE="JavaScript">
<!--
function openwin()
{ window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//-->
</script>
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。OK?
【5、主窗口打开文件1.htm,同时弹出小窗口page.html】
如下代码加入主窗口<head>区:
<script language="javascript">
<!--
function openwin()
{window.open("page.html","","width=200,height=200")
}
//-->
</script>
加入<body>区:
<a href="1.htm">open</a>即可。
【6、弹出的窗口之定时关闭控制】
下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则…),让它10秒后自动关闭是不是更酷了?
首先,将如下代码加入page.html文件的<head>区:
<script language="JavaScript">
function closeit()
{setTimeout("self.close()",10000) //毫秒}
</script>
然后,再用<body> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)
【7、在弹出窗口中加上一个关闭按钮】
<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
</FORM>
呵呵,现在更加完美了!
【8、内包含的弹出窗口-一个页面两个窗口】
上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。
通过下面的例子,你可以在一个页面内完成上面的效果。
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openwin()
{OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()}
</SCRIPT>
</head>
<body>
<a href="#">打开一个窗口</a>
<input type="button" value="打开窗口">
</body>
</html>
看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。
【9、终极应用--弹出的窗口之Cookie控制】
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(有解决的办法吗?Yes! ;-) Follow me.
我们使用cookie来控制一下就可以了。
首先,将如下代码加入主页面HTML的<HEAD>区:
<script>
function openwin()
{window.open("page.html","","width=200,height=200")}
function get_cookie(Name)
{var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}
</script>
然后,用<body>(注意不是openwin而是loadpop啊!)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!
写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
需要注意的是,JS脚本中的的大小写最好前后保持一致。
分享到:
相关推荐
本文将详细探讨两种在Android WebView中加载H5页面并去除地址栏的方法。 方法一:JavaScript交互去地址栏 这种方法是通过在H5页面中使用JavaScript来实现的。WebView有一个特性,即可以与Java代码进行交互,我们...
在网页设计中,弹出无边窗口是一种常见的特效,它可以在用户触发特定事件时,如点击按钮,打开一个新的窗口,这个窗口通常没有浏览器的工具栏和地址栏,呈现出更专注的用户体验。"最简弹出无边窗口"的实践就是利用...
实例011 弹出全屏显示的网页模式对话框 16 实例012 网页拾色器 18 实例013 日期选择器 21 1.3 窗口的动画效果 26 实例014 页面自动滚动 26 实例015 打开窗口特殊效果 27 实例016 动态显示窗口 29 实例017 慢慢放大的...
- **响应式设计**:使用媒体查询(Media Queries)确保网页在不同设备上都能良好显示。 - **网格布局**:利用CSS Grid或Flexbox进行页面布局,使内容排列有序且美观。 - **动画与过渡**:为页面元素添加平滑的过渡效果...
**恶意行为:** 恶意网页可能会在IE工具栏中添加不需要的按钮,或者在地址栏的下拉列表中插入未访问过的网址。 **解决方法:** 要去掉不需要的工具栏按钮,可以右键点击工具栏按钮,选择“自定义”,然后在“当前工具...
这些代码通过`window.open`函数来控制新窗口的打开方式,例如去掉工具栏、地址栏、菜单栏等,或者直接进入全屏模式,这些都是为了提供更沉浸式的用户体验,同时减少用户进行页面操作的可能性。 ### 结论 总体而言...
无论您什么时候访问特定类型的网页,此类扩展程序都会检测出来,并在地址栏中显示一个图标。点击该图标可对网页执行相应的操作。例如,RSS Subscription Extension(仅提供英文版)只要检测到您访问的网页上存在...
地址栏图标 <link rel="Shortcut Icon" href="favicon.ico"> favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下 收藏栏图标 查看源码 查看网页源代码 onclick="window.location = "view-source:"+ ...
6. Javascript弹窗:MessageBox、Response.Write()表明了在服务器端代码中如何通过写入HTML代码来在客户端显示信息,以及如何在客户端使用JavaScript弹出信息框。 ***页面注册客户端脚本:this.Page....
6、新增“类_任务栏”可以显示隐藏任何第三方窗口图标,相当于易中的(不在任务栏显示),带【实例】演示。 7、新增“类_线程池1”中的“等待”方法。 8、修复“编码_Utf8到Ansi“分配内存失败BUG,感谢易友【仁鹰】...
1)修正了IE5.5和IE6.0浏览器下上传弹出窗口显示不完全的BUG! 2)修正打开上传窗口时会弹出参数无效的BUG! 3)增加了在IE8浏览器下控件显示不正确的解决办法(更新到faq.htm页面)! 2009/03/23 Version 6.0.2 For...
1)修正了IE5.5和IE6.0浏览器下上传弹出窗口显示不完全的BUG! 2)修正打开上传窗口时会弹出参数无效的BUG! 3)增加了在IE8浏览器下控件显示不正确的解决办法(更新到faq.htm页面)! 2009/03/23 Version 6.0.2 For VS...
-修正EnableMaximize属性不能使Window最大化的BUG,修正了双击标题栏不能最大化的BUG。 -删除Button控件的SystemIcon属性,比如以前这样定义SystemIcon="Close",现在需要这样定义Icon="SystemClose"。 -Window...
-修正EnableMaximize属性不能使Window最大化的BUG,修正了双击标题栏不能最大化的BUG。 -删除Button控件的SystemIcon属性,比如以前这样定义SystemIcon="Close",现在需要这样定义Icon="SystemClose"。 -Window...
• 10.9.htm 鼠标感应 弹出警告框 • 10.10.htm 鼠标感应 渐显图片 • 10.11.htm 禁用鼠标右键 第11章(\第11章) • 11.1.htm 省略window的alert()方法 • 11.2.htm 未...
同时,我们还设置了其他窗口特性,如去除工具栏、菜单栏,允许自动滚动,不允许用户调整窗口大小,以及不显示地址栏和状态栏。 调用这个函数的方式如下: ```html <a href="javascript:void(0);" onclick=...
- 文件管理工具栏 增加菜单选项,方便移动设备操作 - 文件编辑器,文件树目录 上下左右键盘切换 快捷键加入 - 树目录去掉库,改为个人目录等多处文案修改 - 默认打开用户目录 ####fix bug:(bug解决和程序优化)...
`PopWindow`函数允许在网页上弹出一个新的浏览器窗口,常用于广告、弹窗通知等。它接受三个参数:新窗口的URL、窗口宽度和高度。通过`window.open()`方法实现,可以设置新窗口的各种属性,如滚动条、工具栏等。 ```...
右键单击文档标签工具条,弹出菜单中选择“标签选项”,选中“用鼠标中间的按钮关闭”,这里包括鼠标的滚轮。 【8】软件技巧——如何去掉 EditPlus 保存文本文件时的添加后缀提示? 如果你使用 EditPlus 进行文本...
8. **icons**:存放插件的图标文件,这些图标在Chrome浏览器的扩展管理界面和地址栏中显示。 9. **images**:这个文件夹可能包含了插件使用的图像资源,如提示图标、背景图片等。 安装这个插件后,用户可能会体验...