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

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

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

主视窗HTML如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>

 <script type="text/javascript">

         function openWin() {

             var params = new Array();

             params[0] = new Array("CL1", "milo test");

             params[1] = new Array("CL2", "Taipei");

             var popupwin = window.open("popup.jsp", "Map", "status=0,title=0,height=600,width=800,scrollbars=1");

             //onload只能执行一次，也就是如果子窗口有onload事件，可能会覆盖。

             popupwin.onload = function(e){

                 popupwin.postMessage(params, "http://"+window.location.host);

             }

             popupwin.onunload = function(e){

                 var val = popupwin.returnValue;

                 alert(val);

             }

         }

     </script>

 </head>

 <body>

 <input type="button" value="Open Window" onclick="openWin()" />

 </body>

 </html>

打开子视窗之后，要给视窗传参数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。

子视窗参考如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>popup window</title>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script language="javascript" type="text/javascript">

    function closeWin() {

        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){

                var params = e.data;

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

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

            });

        }

    };

</script>

</head>

<body>

Parameter CL1: <b id="cl1"></b>

Parameter CL2: <b id="cl2"></b>

<div><input type="button" value="Return Value" onclick="closeWin()" /></div>

</body>

</html>

运行结果：

window.open之postMessage传参数的更多相关文章

  1. Wpf Page间跳转传参数 And Window To Page

    这段时间用到Wpf,页面间的跳转网上有不少的示例,但是有些已经不能用了,尤其是页面间的传参问题更是一大堆,但正确的解决方案却没有几个,或者说写的不清楚,让人走了很多弯路,查看官方文档后发现了正确的姿势 ...

  2. spring mvc 传参数

    1.页面:(1)js传参数:location.href="${ctx }/forum/changeCtm.html?ctmId="+id; (2)将内容写在form表单里面,然后用 ...

  3. WPF 之 窗口间传参数

    有如下几种方式: 1) 声明个全局变量,就是App.xaml里面声明:在所有窗体里面都可以引用 Application.Current.Properties["ArgumentName&qu ...

  4. js页面传参数时，参数值包含特殊字符的处理

    js页面传参数时,参数值包含特殊字符应该怎么处理,解决方法就是利用js的escape函数,这个函数在解决中文乱码等方面应用的比较广泛.推荐使用. 工作中遇到的小问题,一个页面中通过window.sho ...

  5. js 传参数

    引用js实现传参数,然后在js文件里面动态加载东西,比如传递参数然后动态加载皮肤颜色,而我为了实现多语言,一般人家传递参数是为了区分版本用的还有清除js缓存问. <script src=&quo ...

  6. asp.net向后台传参数动态加载图片

    //向后台传参数动态加载图片 $(function() { $("#Button1").click(function() { var stockcode = getUrlParam ...

  7. iframe之间的postMessage传参

    1.传参 function IframeClose() { var obj = {method: "iframeClose"}; window.parent.postMessage ...

  8. WebUpload formdata 上传参数

    https://www.cnblogs.com/wisdo/p/6159761.html webUploader 是款很好用的优秀的开源上传组件,由百度公司开发,详细的介绍可参见webUploader ...

  9. 网页向flash传参数。显示视频。(例子)

    [例子1]网页向flash传参数,显示视频: 下面要做的事情:做一个flash文件,可以通过网页得到参数(视频文件名).然后显示视频,并在文本框中显示视频文件名的文字. 1.建立一个flash文件:3 ...

随机推荐

  1. [转] c# 操作Word

    来自 风过四季天 的原文 c# 操作Word总结 在医疗管理系统中为保存患者的体检和治疗记录,方便以后的医生或其他人查看.当把数据保存到数据库中,需要新建很多的字段,而且操作很繁琐,于是想 到网页的信 ...

  2. 【314】putty 自动登录

    putty是一款好用的远程登录linux服务器软件,但每次输入用户名密码毕竟有些烦人,这里教你免用户名密码登陆. 本教程通过 *.bat 文件进行添加参数,下面为相应的代码: 方法一:(直接将密码/用 ...

  3. LeetCode之动态规划

    62. Unique Paths QuestionEditorial Solution Total Accepted: 86710 Total Submissions: 239084 Difficul ...

  4. Hash表算法详解

    Hash表定义 散列表(Hash table,也叫哈希表),是根据关键字值(Key value)直接进行访问的数据结构.也就是说,它通过把关键字(关键字通过Hash算法生成)映射到表中一个位置来访问记 ...

  5. Java服务器工程师任职资格

    Java服务器端开发工程师 1.Java服务器端3年以上开发经验 2.至少一个完整游戏项目经验 3.熟练掌握OOA.OOD.OOP 4.掌握常见网游协议开发方法 5.对TCP/IP有深入了解 6.对消 ...

  6. java基础之HashSet如何保证对象的唯一性

    首先Set集合是无序的 不可重复的 add的时候判断对象是否重复是用的equals HashSet<String> 存储String类型的数据时是可以保证数据的唯一性的 因为String类 ...

  7. fsync性能问题

    最近在测试种发现程序里调用fsync刷文件到磁盘时,开销只有几百微秒,于是对fsync相关机制进行了一番调查. 磁盘(或RAID卡)自身通常会有硬件缓存机制,对于写操作,有write back和wri ...

  8. UNITY把3D模型显示在UI层级上的思路

    一般UI是处理于显示最高层级的, 因此这里的做法是 使用镜子效果,做镜子可使用renderTexture 然后启用一个摄像机对renderTexture进行数据填充, 然后在ui上使用Raw Imag ...

  9. ios加载本地html

    UIWebView加载工程本地网页与本地图片 - (void)viewDidLoad { [super viewDidLoad]; NSString *filePath = [[NSBundle ma ...

  10. 9-queue

    在C++中只要#include<queue>即可使用队列类,其中在面试或笔试中常用的成员函数如下(按照最常用到不常用的顺序) 1. push 2. pop 3. size 4. empty ...