这次要实现一个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. Netty使用Google的ProtoBuf

    protobuf是由Google开发的一套对数据结构进行序列化的方法,可用做通信协议,数据存储格式,等等.其特点是不限语言.不限平台.扩展性强 Netty也提供了对Protobuf的天然支持,我们今天 ...

  2. HTTP接口开发专题三（发送http请求，调用http接口的流程）

    一.xml数据格式传输 1)构造xml参数:通过JAXB将java对象转换为xml 2)调用上一篇的http工具类的方法,发送请求到目的接口地址 3)返回的xml字符串结果,用JAXB进行解析成jav ...

  3. 03-23 MVC框架（以查询、删除为例）

    1.MVC的定义: MVC(Model-View-Controller,模型-视图-控制器)是用于将应用程序粉好吃呢过如下3个主要方面的体系结构模式: 模型(Model):一组类和业务规则,类用于描述 ...

  4. 有关DotNetBar设计样式和运行时的样式不一致的问题

    可以在 窗体类构造函数的InitializeComponent后加上下面圈出的内容:  this.EnableGlass = false; 参考文章 DotNetBar如何控制窗体样式

  5. 控件的WndProc WindowProc

    SubClassWndProc This example shows how to use the WndProc method and the WindowProc property to subc ...

  6. 太白老师 day06 编码 encode decode

    ASCII : 字母, 数字, 特殊字符 字符:1个字节 数字: 1个字节 Unicode: 万国码, 包含所有文字 创建之初 字符: 2个字节 中文: 2个字节 升级: 字符: 4个字节 中文 : ...

  7. Zabbix 监控 Mysql 状态

    简介: 如何使用 Zabbix 来监控 Mysql 状态 ? Zabbix 有自带监控 Mysql 的模板,但是却不能直接使用.. 需要我们根据模板提供的 Key 自己写脚本获取数据 1.查看都有哪些 ...

  8. kubernetes ServiceAccount

    api server 启动参数增加 –admission_control=…,ServiceAccount,…

  9. linux： 空指令(:)

    :指令 描述: 空命令,除了参数替换和重定向外不执行任何操作,总是保证退出码为0. eg1:创建文件(不需要调用其它程序,速度更快) :>/path/to/file 测试: 创建10000个不存 ...

  10. centos6.5 源码安装 mysql

    1.下载源码包 我的版本:mysql-5.6.4-m7.tar.gz 2.安装之前先卸载CentOS自带的MySQL [root@localhost ~]# yum remove mysql 3.编译 ...