概述

我们需要两个窗口进行不同的操作，互相不影响，并且能将值传递过去

详细

代码下载：

一、准备工作

1、需要准备好一个服务容器，例如tomcat之类的服务容器

2、本例子主要实现了一个父子窗口之间的值传递

二、程序实现

1、文件截图

微信截图_20170706100237.png

2、运用该案例主要有以下步骤：

用支持HTML5的浏览器打开

3、win.html的div部分代码如下：

The New Window

js部分代码如下：

window.onload = function() {                var text = document.getElementById('txt');                  var btn_send = document.getElementById('send');                var prent = null;                btn_send.onclick = function() {                     // 通过 postMessage 向父窗口发送数据                          freceiveMsg(prent);                }                //监听函数，接收一个参数--Event事件对象                function receiveMsg(e) {                    console.log("Got a message!");                    console.log("Message: " + e.data);                    console.log("Origin: " + e.origin);                    text.innerHTML = "Got a message!
" +                        "Message: " + e.data +                        "
Origin: " + e.origin;                    //获取父对象                    prent = e;                }

4、posIndex.html的div部分代码如下：

js部分代码如下：

window.onload = function() {                var btn = document.getElementById('btn');                var btn_send = document.getElementById('send');                var text = document.getElementById('txt');                  var win;                btn.onclick = function() {                    //通过window.open打开接收消息目标窗口                    win = window.open('http://127.0.0.1:8080/win.html', 'popUp');                }                btn_send.onclick = function() {                     // 通过 postMessage 向子窗口发送数据                          win.postMessage( document.getElementById("message").value, 'http://127.0.0.1:8080/');                }