`
warnerhit
  • 浏览: 123776 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

window.open 参数详解

window.open参数详解htmljavascript 
阅读更多

window.open 参数

经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，

或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息

、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面

效果非常的容易，只要往该页面的HTML里加入几段Javascript代码即可实现。下

面俺就带您剖析它的奥秘。
【1、最基本的弹出窗口代码】
其实代码非常简单：
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html')
-->
</SCRIPT>
因为着是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascr

ipt">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用，在这

些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html

不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(..

/)均可。
用单引号和双引号都可以，只是不要混用。
这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</b

ody>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往

前放。

【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=n

o, 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脚本结束

 

参数 | 取值范围 | 说明
| |
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 | 窗口被激活后是否浮在其它窗口之上

 

【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 onload="openwin()">
...任意的页面内容...
</body>
</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有

任何用途。
怎么调用呢？
方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；
方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；
方法三：用一个连接调用：
<a href="#" onclick="openwin()">打开一个窗口</a>
注意：使用的“#”是虚连接。
方法四：用一个按钮调用：
<input type="button" onclick="openwin()" 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=n

o, status=no"
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=1

00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca

tion=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" onclick="openwin()">open</a>即可。

【6、弹出的窗口之定时关闭控制】

下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段

代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则

...)，让它10秒后自动关闭是不是更酷了？
首先，将如下代码加入page.html文件的<head>区：
<script language="JavaScript">

function closeit() {

setTimeout("self.close()",10000) //毫秒

}

</script>
然后，再用<body onload="closeit()"> 这一句话代替page.html中原有的<BO

DY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗

口的代码，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="#" onclick="openwin()">打开一个窗口</a>
<input type="button" onclick="openwin()" 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 onload="loadpopup()">（注意不是openwin而是loadpop啊！）

替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进

入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！

写到这里弹出窗口的制作和应用技巧基本上算是完成了

window.open()居中

window.open('url,null,'height=500,width=800,top='+(screen.height-500)/2+',left='+(screen.width-800)/2+',toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no');

OR

function openwindow(url,name,iWidth,iHeight)
{
  var url;                                 // 转向网页的地址;
  var name;                           // 网页名称，可为空;
  var iWidth;                          // 弹出窗口的宽度;
  var iHeight;                        // 弹出窗口的高度;
  var iTop = (window.screen.availHeight - 30 - iHeight) / 2;       // 获得窗口的垂直位置;
  var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;           // 获得窗口的水平位置;
  window.open(url,name, ' height= ' + iHeight + ' ,,innerHeight= ' + iHeight + ' ,width= ' + iWidth + ' ,innerWidth= ' + iWidth + ' ,top= ' + iTop + ' ,left= ' + iLeft + ' ,toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no ' );
}

 

另外：

window.location = "http://www.xxxxxxxx.net" 跳转后有后退功能 
其实应该是 window.location.href
window.location.replace("http://www.xxxxxxxx.net") 跳转后没有后退功能 

window.open("http://www.xxxxxxxx.net") 要新的窗口打开链接 
这个一般用于简单的弹出页面，现在基本上都被屏蔽掉了

 

 

window.location.reload();
window.location = "/Admin/UserList";
window.open("/Admin/UserList");

window.location.href = '/Admin/UserList'; 

 

 

window.location.reload()刷新当前页面.

parent.location.reload()刷新父亲对象（用于框架）

opener.location.reload()刷新父窗口对象（用于单开窗口）

top.location.reload()刷新最顶端对象（用于多开窗口）

都是重定向

 

-----------------------------使用总结-------------------------
模式窗体
var returnval=window.showModalDialog(url,window,"dialogWidth=220px;dialogHeight=530px");
注意第2个参数传递为window作用是可在弹出的窗体中访问父窗口里面的属性或方法，访问形式如下:
dialogArguments.parentfun(){};
returnvalue是一个返回数值，不能是文档对象，而是一个简单的Javascript对象(String,Date...)
window.returnValue="123";那么returnval的数值是123

open弹出的窗体
var obj=window.open(url,'','location=no,menubar=no,scroll=yes,height=756px,width=940px,resizable=no,status=yes');
访问父页面方法：如下:
window.opener.parfun(){}
注意obj是对弹出的窗体的一个引用，可以调用obj.close()方法关闭弹出的窗体.

 

原文链接：http://blog.sina.com.cn/s/blog_57112b350100hwe9.html

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    window.open参数详解

    ### window.open 参数详解 在JavaScript中，`window.open()` 方法被广泛用于打开新的浏览器窗口或标签页。这对于创建弹出窗口、预览链接等场景非常有用。本文将详细介绍 `window.open()` 的各个参数及其用法。 ###...

    window.open参数详解.txt

    ### window.open()函数详解 在Web开发中，`window.open()`是一个非常实用的JavaScript函数，用于在新的浏览器窗口或标签页中打开一个指定的URL。它不仅能够打开新窗口，还可以控制新窗口的属性，如大小、位置以及...

    Window.Open详解

    ### Window.open() 方法详解 #### 一、方法简介 `window.open()` 是一个在Web开发中经常被用来创建新浏览器窗口或标签页的方法。此方法是 `window` 对象的一个属性，通过调用该方法可以指定打开的新窗口的URL、...

    window.open打开新窗口参数设置

    ### window.open 打开新窗口参数设置详解 在前端开发中，`window.open()` 方法是浏览器内置的一个功能，用于在JavaScript中打开新的浏览器窗口。本文将深入探讨如何使用 `window.open()` 方法及其参数设置，帮助...

    window.open参数详解附实例

    一、window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二、windown.open基本语法： window.open(pageURL,name,parameters) 其中： pageURL为子窗口路径name为子窗口句柄parameters为窗口参数...

    JavaScript中Window.open参数

    ### JavaScript中Window.open参数详解 #### 1. 最基本的弹出窗口代码 在Web开发中，`window.open` 方法是非常实用的一个功能，它可以用来创建一个新的浏览器窗口或标签页，并加载指定的URL。最简单的使用方式如下...

    window.open.txt

    根据提供的文件信息，我们可以深入探讨`window.open()`方法在不同浏览器环境下的特性和使用细节。 ### window.open() 方法概述 `window.open()`是JavaScript中一个非常实用的方法，它用于在一个新的浏览器窗口或...

    ShowModalDialog与window.open的区别

    #### 六、window.open详解 **1. 功能介绍** `window.open` 是一个标准方法，用于打开一个新的浏览器窗口。它可以是模式窗口，也可以是非模式窗口。非模式窗口意味着用户可以在新窗口打开的同时继续与原窗口交互。 ...

    用window.open,opener实现网页间通信

    ### 使用 `window.open` 和 `window.opener` 实现网页间通信 #### 一、引言 在现代Web开发中，网页间的通信是一项常见的需求。例如，在多窗口或多个标签页的应用场景下，如何实现不同窗口间的高效数据交互，成为了...

    js中window.open打开一个新的页面.docx

    window.open() 函数在 JavaScript 中的应用详解 window.open() 函数是 JavaScript 中一个非常重要的函数，用于打开一个新的浏览器窗口或标签页。在实际开发中，我们经常需要使用 window.open() 函数来打开新的页面...

    window.open的参数详细应用

    ### window.open 的参数详细应用 在网页开发过程中，`window.open` 方法被广泛应用于打开新的浏览器窗口或标签页。此方法对于实现弹出窗口、预览功能等具有重要作用。下面将详细探讨 `window.open` 方法的各项参数...

    详解js location.href和window.open的几种用法和区别.docx

    详解 JS location.href 和 window.open 的几种用法和区别 location.href 和 window.open 是 JavaScript 中两个常用的方法，用于控制浏览器的导航和窗口操作。它们的用法和区别是很多开发者需要了解和掌握的知识点。...

    window.open全攻略

    【Window.open()详解】 在JavaScript中，`window.open()` 是一个非常重要的方法，它用于打开一个新的浏览器窗口或者重载已有的窗口。以下是对这个方法的详细介绍： ### 1. 基本用法 最简单的`window.open()` 使用...

    实现弹11出窗口的window.open用法详解(js代码).docx

    ..实现弹11出窗口的window.open用法详解(js代码).docx

    实现弹11出窗口的window.open用法详解(js代码).pdf

    ..实现弹11出窗口的window.open用法详解(js代码).pdf

    windows.open()详解及浏览器兼容问题

    关于window.open()的详细介绍使用,浏览器对于bom的不同兼容问题

    window.open的参数说明控制谈出可以定植大小的窗口

    ### window.open方法详解 在网页开发中，`window.open` 方法是用于打开新窗口或标签页的一个非常实用的功能。此方法常被用在各种场景下，例如：弹出广告、登录框、信息提示等。 #### 方法语法 ```javascript ...

    js利用IE通过windowopen方式保存网页部分内容到本地

    本文将详细解析这一技术的核心原理与实践步骤，帮助读者深入理解如何通过`window.open`方法在IE浏览器环境下保存网页数据。 ### 技术核心：`window.open`与`execCommand` #### `window.open`方法 `window.open`是...

Magicbox
Global site tag (gtag.js) - Google Analytics