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

客官°小女子只卖身不卖艺 2022-05-31 08:42 179阅读 0赞

# 概述 #

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

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10551.html][http_www.demodashi.com_demo_10551.html] ####

#### 一、准备工作 ####

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

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

#### 二、程序实现 ####

1、文件截图

![微信截图\_20170706100237.png][20170706100237.png]

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

*  打开tomcat的ROOT目录
 *  把两个文件丢到ROOT目录
 *  用支持HTML5的浏览器打开[http://127.0.0.1:8080/posIndex.html][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部分代码如下：

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/');
    
                    }

#### 三、运行效果 ####

![微信截图\_20170706100746.png][20170706100746.png]

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

[http_www.demodashi.com_demo_10551.html]: http://www.demodashi.com/demo/10551.html
[20170706100237.png]: /images/20220531/c56c14ce08124254ae547fe2771b8b35.png
[http_127.0.0.1_8080_posIndex.html]: http://127.0.0.1:8080/posIndex.html
[20170706100746.png]: /images/20220531/cc17b8bff67f4a5cb8137c37cb49d53d.png
[http_www.demodashi.com]: http://www.demodashi.com/