Web页面父子窗口交互总结

 

一、主要四种方式

 

      类型名称

             子窗口引用父窗口

                 父窗口引用子窗口

   Iframe

通过parent.var就可以对父页面的变量和方法进行操作

通过获取Iframe的contentWindow对象来访问子页面的window

   Open

通过window.opener来访问父页面的window对象

通过window.open方法的返回值拿到子页面的window，就可以操作子页面的变量和方法

   ShowModalDialog

访问父页面的window，需要在执行showModalDialog方法的时候，把父页面的window当作参数传递过去

因为showModalDialog是阻塞的，父页面的代码在子页面不关闭之前无法继续执行，所以只能通过returnValue拿到子页面的变量

   ShowModelessDialog

需要在执行方法的时候，把父页面的window当作参数传递过去

showModelessDialog会直接返回子页面的window对象，不是阻塞的，可以直接对子页面的方法和变量进行访问

 

二、详细说明

 1、Iframe

   页面引用Iframe代码，可设置引用页面的外观样式：

  <iframe id="iframeA" frameborder="no" border="0" marginwidth="0px" src="iframeA.aspx?Id=xxx"  width='256px' scrolling='no' height='285px' />";

   父窗口访问子窗口的方法、属性、html元素

 

子窗口访问父窗口的方法、html元素

 

子窗口间的相互访问

 

2、Open

 a、window.open(pageURL ,name, parameters) 其中： pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数

b、window.open ('page.html','newwindow','height=150,width=300,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no , location=no, status=no') 

其中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 | 窗口被激活后是否浮在其它窗口之上

 

3、showModalDialog  和  showModelessDialog

window.showModalDialog(sURL [, vArguments] [,sFeatures])   模态窗口

window.showModelessDialog(sURL [, vArguments] [,sFeatures])  非模态窗口

参数说明：

a、sURL--必选参数，类型：字符串。用来指定对话框要显示的文档的URL。

b、vArguments--可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通window.dialogArguments来取得传递进来的参数。

c、sFeatures--可选参数，类型：字符串。用来描述对话框的外观等信息，eg：dialogWidth=350px; dialogHeight=350px ; status:no ; help:no ，用分号“;”隔开。

异同

同：两者弹出的窗体不能刷新

异：前者是模态窗口，始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果；后者是非模态窗口，被打开后，用户可以随机切换输入焦点，还可以操作父窗口。

 

 a、父子窗口交互，在父窗口中：

   var newWin=window.showModelDialog(url,window,'');

   newWin.open(); 

   此时参数window即是父窗口对象

在子窗口中：

    需首先获取父窗口对象，然后才能使用父窗口对象。由于父窗口对象是在创建子窗口时通过传入参数的方式传入的，因此，在子窗口中也只能通过获取窗口参数的方式获取父窗口对象。

  方式如下：

   var parent=widnow.dialogArguments；

   parent.location.reload(); //刷新父页面

  变量parent便是父窗口对象

b、 要实现在模态子窗口中传值到父窗口，需要使用window.returnValue完成

c、 子窗口设置父窗口的值

   var x=parent.document.getElementById("age").value;
   x=x+1；
  //设置父窗口中age属性值
  parent.document.getElementById("age").value=x;

 

三、总结：

 window.parent特性来判断这个窗口是否是顶层窗口。如：

       function is_toplevel(w){

          return (w.parent == w);

        }

  window.opener(parent).location.reload(); //子窗口刷新父窗口
   window.opener.location.href //获取父窗口href
   window.opener.locaiton.pathname //获取父窗口路径名

   //刷新父页面
   window.location.href=window.location.href ; //重新定位父页面
   window.location.reload;

 很多细节之处需注意！