JavaScript打开窗口几种方法总结
js打开窗口一般也就是使用window.open方法:
win = window.open(CHILD_WINDOW_URL, CHILD_WINDOW_NAME, CHILD_WINDOW_ATTRS);
然后父窗口可以通过win 取得子窗口的引用,然后就可以检测 win是否定义和win.closed来检测窗口是否打开。
代码如下 | 复制代码 |
<SCRIPT LANGUAGE="javascript"> |
代码放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。
但是如果刷新父窗口,父窗口就会失去这些引用,那么我们如何再次检测子窗口是否存在?
我想大概有以下方法:
方法一 使用cookie
打开子窗口的时候,子窗口或者父窗口可以写一个cookie来标示子窗口是否打开,然后子窗口关闭的时候删除这个cookie;这样即使父窗口刷新,cookie依然存在,这样父窗口就可以通过检测cookie的存在来检测子窗口是否存在,子窗口和父窗口可以跨子域。
方法二 本地存储
方法基本和方法一一样,但是子窗口和父窗口不能跨域,因为本地存储不能跨域,子域也不可以。
方法三 window.open
无意发现了这个东东,很好的方法,我试了下兼容性很好,地址:测试地址;
其大体原理如此:
window.open(“”, CHILD_WINDOW_NAME, CHILD_WINDOW_ATTRS);
通过open一个相同的window名字且地址为空的窗口,通过判断这个窗口的这个地址是否是”about:blank”,如果是,那么这个窗口已经关闭了(前提是前一个打开的地址不是空的)。
代码如下 | 复制代码 |
win = window.open("", CHILD_WINDOW_NAME, CHILD_WINDOW_ATTRS); if (win.location.href === "about:blank") { //窗口不存在 win = window.open(CHILD_WINDOW_URL, CHILD_WINDOW_NAME, CHILD_WINDOW_ATTRS); } else { //窗口以已经存在了 win.focus(); } |
这是个不错的方法,但是打开子窗口的时候,子窗口不能进行重定位,否则ie下会出现 拒绝访问 的错误,具体的方法看看例子吧。
<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>
JavaScript 弹出自适应图片窗口
代码如下 | 复制代码 |
<script language="JavaScript" type="text/JavaScript"> |
各项参数
其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。
参数 | 取值范围 | 说明
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
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 | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
打开新窗口关闭旧窗口
通过重定向URL实现打开新窗口的同时“关闭”旧窗口
代码如下 | 复制代码 |
test1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> test1 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <script type="text/javascript"> function toNewWindow() { window.top.location.href="test2.html"; } </script> <BODY> <input type="button" value="打开另一个页面test2.html" onclick="toNewWindow()"> </BODY> </HTML> test2.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>test2.html</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> 通过重写URL,打开了要跳转的页面test2.html </BODY> </HTML> |
补充:网页制作,js教程