这次要实现一个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经典实例

    1,九九乘法表 undefined reference to `sqrt' linux本身无math库 -lm,伪链接;

  2. 关于 warning CS0659:“***”重写Object.Equals(object o)但不重写Object.GetHashCode()

    对象相等性和同一性 System.Object 类型提供了以下方法, namespace System { // // 摘要: // 支持 .NET Framework 类层次结构中的所有类,并为派生 ...

  3. i++的原子性问题

    一.什么是原子性 简单的可以理解为:操作是不可再分割的,比如: int i=0; 但是i++的操作是可以再分的,比如: i++ //分解后 i=i+i 上面的代码在多线程环境下取值是有问题的,比如: ...

  4. @JsonIgnore

    @JsonIgnore 避免取JSON对象时无限递归的问题,过滤掉一些不需要的属性,说明createdDate这个属性不需要转成json,放到getter方法前生效

  5. GitHub个人使用入门

    今天突然想起来了github 于是开始了入门之旅 如果你用过svn 那么你用起来感觉入门比较快的(至少我是这么感觉的)和在svn服务器上建项目的流程很像 每次修改代码之后提交的过程是: add, co ...

  6. 自定义tag标签的方法

    JSP1.0中可以通过继承TagSupport或者BodyTagSupport来实现自定义的tag处理方法. JSP2.0中也支持另外一种更为简单的自定tag的方法,那就是直接讲JSP代码保存成*.t ...

  7. DEV 打印功能

    Dev13.1 用的是DocumentViewer,上面的一排按钮,是自动生成的,生成方法为:加了DocumentViewer后,控件右上角有个小三角,点一下,在弹出框中选择"Create ...

  8. Python与Go插入排序

    #!/usr/bin/env python # -*- coding: utf-8 -*- # 插入排序 # 时间复杂度 O(n^2) import time def logger(func): st ...

  9. 实现把C语言编译成java字节码的编译器 一个将C语言编译成java字节码的实例

  10. VMware安装完后，没有虚拟网卡

    1 问题描述: 1.1 windows10首次安装VMware,或者非首次安装VMware时,安装后,没有出现如下图所示的虚拟网卡: 1.2 Xshell或者SecureCRT 或者editplus等 ...