本文为大家详细介绍下js中widow
open()方法的各项参数及使用示例
有想学习的朋友可不要错过了
希望对大家有所帮助
一windowopen()支持环境
JavaScript+/JScript+/Nav+/IE+/Opera+
二基本语法
windowopen(pageURLnameparameters)
其中
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)
三示例
复制代码 代码如下:
<SCRIPT>
<!
window
open (
page
html
newwindow
height=
width=
top=
left=
toolbar=no
menubar=no
scrollbars=no
resizable=no
location=no
status=no
)
//写成一行
>
</SCRIPT>
脚本运行后pagehtml将在新窗体newwindow中打开宽为高为距屏顶象素屏左象素无工具条无菜单条无滚动条不可调整大小无地址栏无状态栏请对照
上例中涉及的为常用的几个参数除此以外还有很多其他参数请见四
四各项参数
其中yes/no也可使用/pixel value为具体的数值单位象素
参数 | 取值范围 | 说明
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav和的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
zlook | yes/no | 窗口被激活后是否浮在其它窗口之上
=====================================================
【最基本的弹出窗口代码】
其实代码非常简单
复制代码 代码如下:
<SCRIPT LANGUAGE="javascript">
<!
window
open (
page
html
)
>
</SCRIPT>
因 为着是一段javascripts代码所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间<! 和 >是对一些版本低的浏览器起作用在这些老浏览器中不会将标签中的代码作为文本显示出来要养成这个好习惯啊
Windowopen (pagehtml) 用于控制弹出新的窗口pagehtml如果pagehtml不与主窗口在同一路径下前面应写明路径绝对路径(http://)和相对路径(/)均可用单引号和双引号都可以只是不要混用
这一段代码可以加入HTML的任意位置<head>和</head>之间可以<body>间</body>也可以越前越早执行尤其是页面代码长又想使页面早点弹出就尽量往前放
【经过设置后的弹出窗口】
下面再说一说弹出窗口的设置只要再往上面的代码中加一点东西就可以了
我们来定制这个弹出的窗口的外观尺寸大小弹出的位置以适应该页面的具体情况
复制代码 代码如下:
<SCRIPT LANGUAGE="javascript">
<!
window
open (
page
html
newwindow
height=
width=
top=
left=
toolbar=no
menubar=no
scrollbars=no
resizable=no
location=no
status=no
)
//写成一行
>
</SCRIPT>
参数解释
<SCRIPT LANGUAGE="javascript"> js脚本开始
windowopen 弹出新窗口的命令
pagehtml 弹出窗口的文件名
newwindow 弹出窗口的名字（不是文件名）非必须可用空代替
height= 窗口高度
width= 窗口宽度
top= 窗口距离屏幕上方的象素值
left= 窗口距离屏幕左侧的象素值
toolbar=no 是否显示工具栏yes为显示
menubarscrollbars 表示菜单栏和滚动栏
Resizable=no 是否允许改变窗口大小yes为允许
location=no 是否显示地址栏yes为允许
status=no 是否显示状态栏内的信息（通常是文件已经打开）yes为允许
</SCRIPT> js脚本结束
【用函数控制弹出窗口】
下面是一个完整的代码
复制代码 代码如下:
<html>
<head>
<script LANGUAGE="JavaScript">
<!
function openwin() { window
open ("page
html"
"newwindow"
"height=
width=
toolbar=no
menubar=no
scrollbars=no
resizable=no
location=no
status=no")
//写成一行
}
//
>
</script>
</head>
<body onload="openwin()">
…任意的页面内容…
</body>
</html>
这里定义了一个函数openwin()函数内容就是打开一个窗口在调用它之前没有任何用途
怎么调用呢？
方法一<body onload="openwin()"> 浏览器读页面时弹出窗口
方法二<body onunload="openwin()"> 浏览器离开页面时弹出窗口
方法三用一个连接调用
<a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" _fcksavedurl=""#"" onclick="openwin()">打开一个窗口</a>
注意使用的"#"是虚连接
方法四用一个按钮调用
<input type="button" onclick="openwin()" value="打开窗口">
【同时弹出个窗口】
对源代码稍微改动一下
复制代码 代码如下:
<script LANGUAGE="JavaScript">
<!
function openwin()
{ window
open ("page
html"
"newwindow"
"height=
width=
top=
left=
toolbar=no
menubar=no
scrollbars=no
resizable=no
location=no
status=no")
//写成一行
window
open ("page
html"
"newwindow
"
"height=
width=
top=
left=
toolbar=no
menubar=no
scrollbars=no
resizable=no
location=no
status=no")
//写成一行
}
//
>
</script>
为避免弹出的个窗口覆盖用top和left控制一下弹出的位置不要相互覆盖即可最后用上面说过的四种方法调用即可
注意个窗口的name(newwindows和newwindow)不要相同或者干脆全部为空OK？
【主窗口打开文件htm同时弹出小窗口pagehtml】
如下代码加入主窗口<head>区
复制代码 代码如下:
<script language="javascript">
<!
function openwin()
{window
open("page
html"
""
"width=
height=
")
}
//
>
</script>
加入<body>区
<a href="htm" onclick="openwin()">open</a>即可
【弹出的窗口之定时关闭控制】
下面我们再对弹出的窗口进行一些控制效果就更好了如果我们再将一小段代码加入弹出的页面(注意是加入到pagehtml的HTML中可不是主页面中否则…)让它秒后自动关闭是不是更酷了？
首先将如下代码加入pagehtml文件的<head>区
复制代码 代码如下:
<script language="JavaScript">
function closeit()
{setTimeout("self
close()"
) //毫秒}
</script>
然后再用<body onload="closeit()"> 这一句话代替pagehtml中原有的<BODY>这一句就可以了(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码秒钟后就自行关闭该窗口)
【在弹出窗口中加上一个关闭按钮】
<FORM>
<INPUT TYPE=BUTTON VALUE=关闭 onClick=windowclose()>
</FORM>
呵呵现在更加完美了！
【内包含的弹出窗口一个页面两个窗口】
上面的例子都包含两个窗口一个是主窗口另一个是弹出的小窗口
通过下面的例子你可以在一个页面内完成上面的效果
复制代码 代码如下:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openwin()
{OpenWindow=window
open(""
"newwin"
"height=
width=
toolbar=no
scrollbars="+scroll+"
menubar=no");
//写成一行
OpenWindow
document
write("<TITLE>例子</TITLE>")
OpenWindow
document
write("<BODY BGCOLOR=#ffffff>")
OpenWindow
document
write("<h
>Hello!</h
>")
OpenWindow
document
write("New window opened!")
OpenWindow
document
write("</BODY>")
OpenWindow
document
write("</HTML>")
OpenWindow
document
close()}
</SCRIPT>
</head>
<body>
<a href="#" onclick="openwin()">打开一个窗口</a>
<input type="button" onclick="openwin()" value="打开窗口">
</body>
</html>
看看 OpenWindowdocumentwrite()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可千万注意多一个标签或少一个标签就会出现错误记得用OpenWindowdocumentclose()结束啊
【终极应用弹出的窗口之Cookie控制】
回 想一下上面的弹出窗口虽然酷但是有一点小毛病(沉浸在喜悦之中一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)那 么每次刷新这个页面窗口都会弹出一次是不是非常烦人？:(有解决的办法吗？Yes! ;) Follow me
我们使用cookie来控制一下就可以了
首先将如下代码加入主页面HTML的<HEAD>区
复制代码 代码如下:
<script>
function openwin()
{window
open("page
html"
""
"width=
height=
")}
function get_cookie(Name)
{var search = Name + "="
var returnvalue = "";
if (document
cookie
length >
) {
offset = document
cookie
indexOf(search)
if (offset !=
) {
offset += search
length
end = document
cookie
indexOf(";"
offset);
if (end ==
)
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 onload="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句 即可你可以试着刷新一下这个页面或重新进入该页面窗口再也不会弹出了真正的PopOnlyOnce！
写到这里弹出窗口的制作和应用技巧基本上算是完成了需要注意的是JS脚本中的的大小写最好前后保持一致
