基于浏览器父子窗口值传递

概述

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

详细

代码下载：http://www.demodashi.com/demo/10551.html

一、准备工作

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

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

二、程序实现

1、文件截图

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

• 打开tomcat的ROOT目录

• 把两个文件丢到ROOT目录

• 用支持HTML5的浏览器打开http://127.0.0.1:8080/posIndex.html

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

<h1>The New Window</h1>
<div id="txt"></div>
<input type="text" id="message" />
<button id="send">send</button>

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!<br>" +

                        "Message: " + e.data +

                        "<br>Origin: " + e.origin;

                    //获取父对象

                    prent = e;

                }

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

<button id="btn">open</button>
<button id="send">send</button>
<input type="text" id="message" />
<br/><br/> 
<div id="txt"></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/');

                }

三、运行效果

注：本文著作权归作者，由demo大师（http://www.demodashi.com）宣传，拒绝转载，转载需要作者授权