这次要实现一个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. Python开发丨这些面试题会不会难倒你

    1:以下的代码的输出将是什么? 说出你的答案并解释. class Parent(object):       x = 1   class Child1(Parent):       pass   cl ...

  2. UNITY引擎变量调用产生不必要内存分配

    https://unity3d.com/de/learn/tutorials/topics/performance-optimization/optimizing-garbage-collection ...

  3. django初体检课程

    最简便的Python web开发框架. C:\Windows\System32>E: E:\>django-admin startproject mysite E:\>cd mysi ...

  4. 【305】◀▶ ArcPy 相关功能实现

    目录: 1. 同一图层的多个要素合并(2种方法) 2. 导入带经纬度坐标的 txt 文件 3. 栅格计算器的实现 4. 添加 shp 文件(显示在 ArcMap) 5. 通过经纬度坐标生成 Polyg ...

  5. rocketmq消费负载均衡--push消费为例

    本文介绍了DefaultMQPushConsumerImpl消费者,客户端负载均衡相关知识点.本文从DefaultMQPushConsumerImpl启动过程到实现负载均衡,从源代码一步一步分析,共分 ...

  6. c# winform 解决PictureBox 无法打印全部图片的问题

    一.   问题描述 在页面使用PictureBox 加载资料图片后,点击“打印”,只能打印图片首页,较大图片则无法全部打印. 二.   原因分析 PictureBox中打印图片时没有设置继续打印相关属 ...

  7. 微信小程序文档里看不到的小Tips

    前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的 ...

  8. Java-精确计算工具类

    import java.math.BigDecimal; import java.math.RoundingMode; /** * 精确计算工具类(加,减,乘,除,返回较大值,返回较小值) */ pu ...

  9. 825. Friends Of Appropriate Ages有效的好友请求的数量

    ［抄题］: Some people will make friend requests. The list of their ages is given and ages[i] is the age ...

  10. Maven详解【面试+工作】 各种安装 没用

    1 Maven介绍1.1 项目开发中遇到的问题 1.都是同样的代码,为什么在我的机器上可以编译执行,而在他的机器上就不行? 2.为什么在我的机器上可以正常打包,而配置管理员却打不出来? 3.项目组加入 ...