Chinaunix首页 | 论坛 | 博客
  • 博客访问: 105901
  • 博文数量: 21
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 403
  • 用 户 组: 普通用户
  • 注册时间: 2014-01-22 11:19
文章分类
文章存档

2014年(21)

我的朋友

分类: 网络与安全

2014-02-28 16:08:50

本文主要讲解window.open()和window.showModalDialog()弹出窗口的一些基本用法和刷新问题


window.open()弹出对话框:

基本语法:

window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)
eg: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')//这句要写成一行

参数解释:

window.open           弹出新窗口的命令;
page.html                弹出窗口的文件名;
newwindow            弹出窗口的名字(不是文件名),非必须,可用空''代替;
height=100              窗口高度;
width=400              窗口宽度;
top=0                     窗口距离屏幕上方的象素值;
left=0                     窗口距离屏幕左侧的象素值;
toolbar=no              是否显示工具栏,yes为显示;
menubar=no           是否显示菜单栏,yes为显示;

scrollbars=no         是否显示滚动栏,yes为显示;
resizable=no           是否允许改变窗口大小,yes为允许;

location=no            是否显示地址栏,yes为允许;

status=no              是否显示状态栏内的信息(通常是文件已经打开),yes为允许;


下面来说一下window.opener


window.opener 实际上就是通过window.open打开的窗体的父窗体。比如在父窗体parent里面通过window.open("sub.html")打开一个窗口,那么在sub.html中window.opener就代表parent,可以通过这种方式设置父窗体的值或者调用父窗体的js方法。

eg:1,window.opener.test(); ---调用父窗体中的test()方法

     2,如果window.opener存在,设置parent中stockBox的值。

      if (window.opener && !window.opener.closed) {

          window.opener.document.parent.stockBox.value = symbol;

     }

主窗口的刷新你可以用
window.opener.location.reload();



window.showModalDialog()弹出对话框刷新问题的总结


showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。


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


test.htm



window.showModalDialog()刷新父窗口和本窗口的方法及注意:
一.刷新父窗口的方法:
1.使用window.returnValue给父窗口传值,然后根据值判断是否刷新。

① 在window.showModalDialog()打开的窗口页面中用window.returnValue方式设置返回值;
     eg:window.returnValue='refresh';
 ②.在写window.showModalDialog()弹出窗口函数时,定义一个个变量,然后根据变量值操作父窗口是否刷新;
     eg:var winPar = window.showModalDialog              

           (url,'','dialogHeight:400px;dialogWidth:800px;status:no;scroll:no;help:no');

           if(winPar  == 'refresh'){
               window.parent.location.reload();  //当window.showModalDialog窗口关闭时执行
           }


winPar为①步骤给showModalDialog()窗口设置的返回值

总结:由于window.showModalDialog函数打开一个IE的模式窗口(就是打开后不能操作父窗口,只能等模式窗口关闭时才能操作),所以想要刷新父窗口只能在模式窗口关闭后执行。用window.returnValue可以向父窗口传值,这样一来可以用从模式窗口向父窗口传递值,然后根据值判断操作父窗口的方式来刷新。这样在任何关闭了模式窗口后父窗口都会自动刷新.


二.刷新模式本窗口
showModalDialog()窗口与window.open()打开的窗口刷新本窗口时不同,showModalDialog()窗口也不能用F5刷新,也没有右键操作
①. 在模式窗口页面中加入:    
//在html和body之间


②. 在需要执行刷新操作的地方执行以下js:
reload.click();//reload为①中隐藏a标签的id,当然可以换成其它名称


三  注意事项

①  在点击window.showModalDialog()窗口的链接的时候会打开新窗口,想要阻止打开新窗口,需要在窗口页

    面中的html和body之间加入: 即可    

②  showModalDialog和showModelessDialog有什么不同?
   showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。

                               类似alert的运行效果。

   showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一

下而已。


阅读(2186) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~