这次要实现一个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. 在线程中调用其它主界面的模块，因为中间有休息1000ms，所以调用前要检查DateTimeRun变量；在From_load 启动线程；在From_closing From_closed 设置DateTimeRun=false

    //系统启动后,自动启动时钟 void jishi_kernel() { try { while (DateTimeRun) { Thread.Sleep(); if (myRunning) Runn ...

  2. C# 6 与 .NET Core 1.0 高级编程 - C# 6 的新功能

    个人原创译文,转载请注明出处.有不对的地方欢迎指出与交流. 英文原文:Professional C# 6 and .NET Core 1.0 - What’s New in C# 6 C# 6 的新功 ...

  3. ubuntu下面板上无网络连接的图标

    解决方法:删除旧的网络配置,重新让networkManager自动配置 sudo service network-manager stop sudo rm /var/lib/NetworkManage ...

  4. spring与mybatis

  5. centos7 时间修改

    转子 http://blog.csdn.net/kuluzs/article/details/52825331 在CentOS 6版本,时间设置有date.hwclock命令,从CentOS 7开始, ...

  6. AddComponentMenu

    [AddComponentMenu] The AddComponentMenu attribute allows you to place a script anywhere in the " ...

  7. NoSuchBeanDefinitionException:No qualifying bean of type found for dependency: expected at least 1 bean which qualifies as autowire candidate for this dependency.

    报错如下: NoSuchBeanDefinitionException:No qualifying bean of type   found for dependency: expected at l ...

  8. 124. Binary Tree Maximum Path Sum (Tree; DFS)

    Given a binary tree, find the maximum path sum. For this problem, a path is defined as any sequence ...

  9. c++ 迭代器模式（iterator）

    提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象的内部表示.当你需要访问一个聚集对象,而且不管这些对象是什么都需要遍 历的时候,就应该考虑用迭代器模式.同时需要对聚集有多种方式遍历时,可以 ...

  10. [C++] c pointer

    the nature of pointer const keyword const int*  p int const *p int*  const p int const a const int a ...