windowopen传值到jsp_window.open之postMessage传参数

这次要实现一个window.open打开子视窗的同时传参数到子视窗，关闭的时候返回参数。

当然简单的做法非常简单，直接在window.open的URL之后接参数即可，但是毕竟get method的参数长度受浏览器的限制，一般从2KB到8KB。

除了get之外，还可以用window.postMessage(), 参考下面的case演示。

主视窗HTML如下：

1

2

3

4

5

Insert title here

6

7

8

9 functionopenWin() {10 varparams= newArray();11 params[0]= newArray("CL1","milo test");12 params[1]= newArray("CL2","Taipei");13

14 varpopupwin=window.open("popup.jsp","Map","status=0,title=0,height=600,width=800,scrollbars=1");15 //onload只能执行一次，也就是如果子窗口有onload事件，可能会覆盖。

16 popupwin.οnlοad= function(e){17 popupwin.postMessage(params,"http://"+window.location.host);18 }19 popupwin.οnunlοad= function(e){20 varval=popupwin.returnValue;21 alert(val);22 }23 }24

25

26

27

28

29

30

打开子视窗之后，要给视窗传参数params，并在子视窗上显示出参数值。

但前提是子视窗必须已经完成监听事件message的填加，否则onload的时候参数传过去也收不到。为了解决这个问题，子视窗必须要在onload事件执行之前添加message事件监听。这里我是添加document.onreadystatechange事件，先看看html的document.readyState, 总的有五个取值：

uninitialized - Has not started loading yet

loading - Is loading

loaded - Has been loaded

interactive - Has loaded enough and the user can interact with it

complete - Fully loaded

为了在onload被fired之前且安全的添加window事件，这里选择用complete，DOC全部加载完且还未触发onload。

子视窗参考如下：

popup window

functioncloseWin() {

window.returnValue= true;

window.close();

}//HTML DOM fully loaded, and fired window.onload later.

document.onreadystatechange= function(e)

{if(document.readyState=== 'complete')

{

window.addEventListener('message',function(e){varparams=e.data;

$('#cl1').text(params[0][1]);

$('#cl2').text(params[1][1]);

});

}

};

Parameter CL2:

运行结果：