javascript中window的弹框用法

向右看齐 2022-08-05 05:05 339阅读 0赞

项目中不一定都是自己维护自己的代码，改别人的bug也是一部分，每个人的习惯不同，所以不能只看自己习惯写的代码，还得习惯别人熟悉的工具，这就要多涉猎实现想同功能的多个方法。

废话不多说，下面来看看浏览器自带的弹框功能window.open():

window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

window.open(pageURL,name,parameters)   
其中：   
pageURL 为子窗口路径 (可以是任意路径如百度的路径或者请求项目中的路径)  
name 为子窗口句柄   
parameters 为窗口参数(各参数用逗号分隔)

参数              | 取值范围              | 说明

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、用函数控制弹出窗口】   
  
　　下面是一个完整的代码。

Java代码   [![收藏代码][icon_star.png]][icon_star.png 1]

1.  <html>   
2.  <head>   
3.  <script LANGUAGE="JavaScript">   
4.     
9.  </script>   
10. </head>   
11. <body οnlοad="openwin()">   
12. …任意的页面内容…   
13. </body>   
14. </html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。   
怎么调用呢？   
方法一：<body οnlοad="openwin()"> 浏览器读页面时弹出窗口；   
方法二：<body οnunlοad="openwin()"> 浏览器离开页面时弹出窗口；   
方法三：用一个连接调用：   
<a href="\#" οnclick="openwin()">打开一个窗口</a>   
注意：使用的"\#"是虚连接。   
方法四：用一个按钮调用：   
<input type="button" οnclick="openwin()" value="打开窗口">   
  
【4、同时弹出2个窗口】   
  
　　对源代码稍微改动一下：

Java代码   [![收藏代码][icon_star.png]][icon_star.png 1]

1.  <script LANGUAGE="JavaScript">   
2.     
10. </script>

为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。   
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？   
  
【5、主窗口打开文件1.htm，同时弹出小窗口page.html】   
  
　　如下代码加入主窗口<head>区：

Java代码   [![收藏代码][icon_star.png]][icon_star.png 1]

1.  <script language="javascript">   
2.     
7.  </script>

加入<body>区：   
<a href="1.htm" οnclick="openwin()">open</a>即可。   
  
【6、弹出的窗口之定时关闭控制】   
  
　　下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则…)，让它10秒后自动关闭是不是更酷了？   
　　首先，将如下代码加入page.html文件的<head>区：

Java代码   [![收藏代码][icon_star.png]][icon_star.png 1]

1.  <script language="JavaScript">   
2.  function closeit()   
3.  \{setTimeout("self.close()",10000) //毫秒\}   
4.  </script>

然后，再用<body οnlοad="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)   
  
【7、在弹出窗口中加上一个关闭按钮】

Java代码   [![收藏代码][icon_star.png]][icon_star.png 1]

1.  <FORM>   
2.  <INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>   
3.  </FORM>

呵呵，现在更加完美了！   
  
【8、内包含的弹出窗口-一个页面两个窗口】   
  
　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。   
　　通过下面的例子，你可以在一个页面内完成上面的效果。

Java代码   [![收藏代码][icon_star.png]][icon_star.png 1]

1.  <html>   
2.  <head>   
3.  <SCRIPT LANGUAGE="JavaScript">   
4.  function openwin()   
5.  \{OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="\+scroll+",menubar=no");   
6.  //写成一行   
7.  OpenWindow.document.write("<TITLE>例子</TITLE>")   
8.  OpenWindow.document.write("<BODY BGCOLOR=\#ffffff>")   
9.  OpenWindow.document.write("<h1>Hello!</h1>")   
10. OpenWindow.document.write("New window opened!")   
11. OpenWindow.document.write("</BODY>")   
12. OpenWindow.document.write("</HTML>")   
13. OpenWindow.document.close()\}   
14. </SCRIPT>   
15. </head>   
16. <body>   
17. <a href="\#" οnclick="openwin()">打开一个窗口</a>   
18. <input type="button" οnclick="openwin()" value="打开窗口">   
19. </body>   
20. </html>

看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。   
  
【9、终极应用--弹出的窗口之Cookie控制】   
  
　　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(有解决的办法吗？Yes! ;-) Follow me.   
　　我们使用cookie来控制一下就可以了。   
　　首先，将如下代码加入主页面HTML的<HEAD>区：

javascript码   [![收藏代码][icon_star.png]][icon_star.png 1]

1.  <script>   
2.  function openwin()   
3.  \{window.open("page.html","","width=200,height=200")\}   
4.  function get\_cookie(Name)   
5.  \{var search = Name + "="   
6.  var returnvalue = "";   
7.  **if** (document.cookie.length > 0) \{   
8.  offset = document.cookie.indexOf(search)   
9.  **if** (offset != -1) \{   
10. offset += search.length   
11. end = document.cookie.indexOf(";", offset);   
12. **if** (end == -1)   
13. end = document.cookie.length;   
14. returnvalue=unescape(document.cookie.substring(offset,end))   
15. \}   
16. \}   
17. **return** returnvalue;   
18. \}   
19. function loadpopup()\{   
20. **if** (get\_cookie('popped')=='')\{   
21. openwin()   
22. document.cookie="popped=yes"   
23. \}   
24. \}   
25. </script>

然后，用<body οnlοad="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！

注意：

window.open(URL,name,features,replace)

如果name使用名字已经存在，那么不会创建一个新的窗口，而是会返回对已经存在的窗口的引用。

否则，则创建一个新的窗口。

##  window.showModalDialog使用 ##

存在父子关系的一种弹出窗口，只有子窗关闭，父窗口才激活，并且可以传送参数和返回值

应用场景：

父页面想要获取弹出页面（子页面）的返回值，利用window.returnValue

基本介绍：  
　　showModalDialog() (IE 4+ 支持)  
　　showModelessDialog() (IE 5+ 支持)  
　　window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。  
　　window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。  
使用方法：  
　　vReturnValue = window.showModalDialog(sURL \[, vArguments\] \[,sFeatures\],"");  
　　vReturnValue = window.showModelessDialog(sURL \[, vArguments\] \[,sFeatures\],"");  
参数说明：  
　　sURL:  
　　必选参数，类型：字符串。用来指定对话框要显示的文档的URL。  
　　vArguments:  
　　可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。  
　　sFeatures:  
　　可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。  
　　1.dialogHeight :对话框高度，不小于100px，IE４中dialogHeight 和 dialogWidth 默认的单位是em，而IE５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。  
　　2.dialogWidth: 对话框宽度。  
　　3.dialogLeft: 离屏幕左的距离。  
　　4.dialogTop: 离屏幕上的距离。  
　　5.center: \{yes | no | 1 | 0 \}：窗口是否居中，默认yes，但仍可以指定高度和宽度。  
　　6.help: \{yes | no | 1 | 0 \}：是否显示帮助按钮，默认yes。  
　　7.resizable: \{yes | no | 1 | 0 \} ［ＩＥ５＋］：是否可被改变大小。默认no。  
　　8.status: \{yes | no | 1 | 0 \} ［IE5+］：是否显示状态栏。默认为yes\[ Modeless\]或no\[Modal\]。  
　　9.scroll:\{ yes | no | 1 | 0 | on | off \}：指明对话框是否显示滚动条。默认为yes。  
下面几个属性是用在HTA中的，在一般的网页中一般不使用。  
　　10.dialogHide:\{ yes | no | 1 | 0 | on | off \}：在打印或者打印预览时对话框是否隐藏。默认为no。  
　　11.edge:\{ sunken | raised \}：指明对话框的边框样式。默认为raised。  
　　12.unadorned:\{ yes | no | 1 | 0 | on | off \}：默认为no。  
参数传递：  
1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符，也可以传递对象。  
2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。

1. 要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：

parent.htm
    <script>
              var obj = new Object();
              obj.name="51js";
              window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
    </script>
    modal.htm
    <script>
              var obj = window.dialogArguments
              alert("您传递的参数为：" + obj.name)
    </script>

2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

parent.htm
    <script>
              str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
              alert(str);
    </script>
    modal.htm
    <script>
              window.returnValue="http://homepage.yesky.com";
    </script>

window.resuleValue 接收请求的返回值

So: 子窗体 --------------------------》父窗体

《-------------------------

window.dialogArguments(地址，传递参数值，浏览器的一些属性)

### 常见技巧： ###

一、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？  
　　在被打开的网页里加上<base target="\_self">就可以了。这句话一般是放在<head>之间的。  
  
二、怎样才刷新showModalDialog和showModelessDialog里的内容？  
　　在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠  
  
javascript了，以下是相关代码：  
  
<body οnkeydοwn="if (event.keyCode==116)\{reload.click()\}">  
<a id="reload" href="filename.htm" style="display:none">reload...</a>  
  
　　将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要  
  
配合<base target="\_self">使用，不然你按下F5会弹出新窗口的。  
  
三、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。  
　　<input type="button" value="关闭" οnclick="window.close()">  
　　也要配合<base target="\_self">，不然会打开一个新的IE窗口，然后再关掉的。  
  
四、Math.random与showModalDialog。  
  
当你设置的弹出网页固定时（如上面的"modal.htm"页面），ie很可能到临时文件区，下载上次产生的该页面(openPage.html),而没有重新加载，  
  
对于动态加载的页面来说，这样往往产生误会，如没有及时更新数据，也就更不利于开发者测试。所以，你可以采用如下方式：  
  
var strPage = “/medal.htm?random="+Math.random();  
  
这样每次产生的strPage是不一样的，原因也就不言自明了。

[icon_star.png]: http://jzgl-javaeye.iteye.com/images/icon_star.png
[icon_star.png 1]: /images/20220805/4d932c48e3ee478080677d85b48045e7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读

相关 Layui的layer.confirm弹框用法，很详细

Layui的弹框用法一、官网示例二、自定义一些样式 1、自定义标题 2、给提示框内容加上图标 3、定义按钮的位置

绝地灬酷狼/ 2024年04月08日 13:37/ 0 赞/ 72 阅读

相关 java工作复习——JavaScript的3个弹框对比总结——JavaScript的Alert弹框——confirm弹框 ——prompt弹框...

引入包：import org.openqa.selenium.Alert; js的alert弹框 Alert alert = driver.switchTo().al

冷不防/ 2023年10月03日 17:03/ 0 赞/ 51 阅读

相关 Easyui 之window 弹出框

<div id="win" class="easyui-window" title="My Window" closed="true" style="width:300

末蓝、/ 2022年08月25日 08:46/ 0 赞/ 280 阅读

相关 javascript中window的弹框用法

项目中不一定都是自己维护自己的代码，改别人的bug也是一部分，每个人的习惯不同，所以不能只看自己习惯写的代码，还得习惯别人熟悉的工具，这就要多涉猎实现想同功能的多个方法。废

向右看齐/ 2022年08月05日 05:05/ 0 赞/ 340 阅读

相关 JavaScript的三种弹出框

下面我们来总结一下js的弹出框： 1. alert弹出框具体写法： <!doctype html> <html lang="en"> <hea

灰太狼/ 2022年07月27日 14:45/ 0 赞/ 238 阅读

相关 JavaScript 弹窗(对话框)警告框、确认框、提示框.

JavaScript 弹窗(对话框) 三种消息框：警告框、确认框、提示框。 1. 警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，

野性酷女/ 2022年06月08日 02:57/ 0 赞/ 472 阅读

相关【JavaScript】8.弹出框（Dialog）

最近做项目，用到了弹出框提示信息，就做了个demo，记录总结了一下，对一般的网站来说，弹出框是比较常见的。或是给出用户操作提示，或是通过弹出框打开一个小窗口以提示信息，或是给出

叁歲伎倆/ 2022年06月01日 13:06/ 0 赞/ 292 阅读

相关 JavaScript弹框

注意：弹窗使用反斜杠来换行![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

系统管理员/ 2022年04月12日 05:40/ 0 赞/ 317 阅读

相关 JavaScript弹出框

提到弹出框，首先想到的alert()了，其次想到的也还是alert（），其实在js中有三种弹出框，下面我们一一说明。 1，仅确定。即：对话框界面上只有确定

忘是亡心i/ 2021年10月13日 04:17/ 0 赞/ 546 阅读

相关 JavaScript弹出框、对话框、提示框、弹窗总结

JavaScript弹出框、对话框、提示框、弹窗总结。 1、JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框

快来打我*/ 2021年09月20日 10:24/ 0 赞/ 576 阅读