`
frank1998819
  • 浏览: 763694 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类

记一次：iframe嵌套网页，利用window.postMessage()实现子父窗口相互传值（转）

    博客分类：
  • JS
 
阅读更多

场景需要：

  • http://a.com -父页面，记做A
  • http://b.com -子页面，记做B
  • B生成的DOM，获取其属性，传值到A
  • A监听事件，获取监听的属性，传到B

正文

利用window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

父页面 A

  1.  
    <template>
  2.  
    <div>
  3.  
    <iframe
  4.  
    :src="iframesrc"
  5.  
    id="a-page"></iframe>
  6.  
    </div>
  7.  
    </template>
  8.  
     
  9.  
    <script>
  10.  
    export default {
  11.  
    computed:{
  12.  
    iframesrc:function(){
  13.  
    let iframesrc = "http://b.com"
  14.  
    return iframesrc
  15.  
    }
  16.  
    },
  17.  
    created () {
  18.  
    // 得到B传来的值
  19.  
    window.addEventListener('message',function(e){
  20.  
    console.log("B DOM的高度", e.data)
  21.  
    },false);
  22.  
    // 监听A页面的事件，发送给B
  23.  
    window.addEventListener('scroll', function () {
  24.  
    let iframe = document.getElementById('a-page');
  25.  
    if (!iframe) {
  26.  
    return;
  27.  
    }
  28.  
    // 下拉距离
  29.  
    let scrollTop = window.pageYOffset ||
  30.  
    document.documentElement.scrollTop ||
  31.  
    document.body.scrollTop ||
  32.  
    0;
  33.  
    // 窗口高度
  34.  
    let windowHeight = window.innerHeight ||
  35.  
    document.documentElement.clientHeight ||
  36.  
    document.body.clientHeight;
  37.  
    let json = {
  38.  
    scrollTop: scrollTop,
  39.  
    windowHeight: windowHeight,
  40.  
    };
  41.  
    iframe.contentWindow.postMessage(json, '*');
  42.  
    });
  43.  
    }
  44.  
    }
  45.  
    </script>

子页面 B

  1.  
    <template>
  2.  
    <div>
  3.  
    <div id="b-page"></div>
  4.  
    </div>
  5.  
    </template>
  6.  
     
  7.  
    <script>
  8.  
    export default {
  9.  
    mounted() {
  10.  
    // 获取到B页面的值，发送给A
  11.  
    let _this = this
  12.  
    let b_pageH = document.getElementById('b-page').scrollHeight;
  13.  
    window.parent.postMessage(b_pageH, '*');
  14.  
    // 得到A页面的值
  15.  
    window.addEventListener('message',function(e){
  16.  
    console.log("e.data.scrollTop", e.data.scrollTop)
  17.  
    console.log("e.data.windowHeight", e.data.windowHeight)
  18.  
    },false);
  19.  
    }
  20.  
    }
  21.  
    </script>

效果

本人不太会录屏，就上截图了
图片描述

开始因为没获取的值，所以是undefined

 

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

最近做一个POS机终端遇到一个问题，子父窗口传值问题，因为POS机是两个屏幕，如果将一个页面拉长投射虽然可以做到两个屏幕显示，但是因为是触摸屏，当第一个屏幕在操作的时候会影响到第二屏幕，反之也是如此，既然需求明确了，问题也知道了，则我们需要两个窗口进行不同的操作

 

首先是父页面：

 

<!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Html5 postMessage</title>

        <style>

            #otherWin {

                width: 600px;

                height: 400px;

                background-color: #cccccc;

            }

            #txt {

                width: 500px;

                height: 300px;

                background-color: #cccccc;

            }

        </style>

    </head>

    <body>

        <button id="btn">open</button>

        <button id="send">send</button>

        <input type="text" id="message" />

         <br/><br/> 

         <div id="txt"></div>

        <script>

            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/mngapp/chatroom/win.html', 'popUp');

                }

                btn_send.onclick = function() { 

                    // 通过 postMessage 向子窗口发送数据      

                    win.postMessage( document.getElementById("message").value, 'http://127.0.0.1:8080/');

                }

                if (window.addEventListener) {

                    //为window注册message事件并绑定监听函数

                    window.addEventListener('message', receiveMsg, false);

                }else {

                    window.attachEvent('message', receiveMsg);

                }

              //监听函数，接收一个参数--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;

                }

            };

        </script>

    </body>

    </html>

 

然后再是子页面：

<!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Html5 postMessage</title>

        <style>

            #txt {

                width: 500px;

                height: 300px;

                background-color: #cccccc;

            }

        </style>

    </head>

    <body>

        <h1>The New Window</h1>

        <div id="txt"></div>

        <input type="text" id="message" />

        <button id="send">send</button>

        <script>        

            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;

                }

                function freceiveMsg(e) {

                    console.log("freceiveMsg:"+e);

                    e.source.postMessage(document.getElementById("message").value,

                            e.origin);

                }

                if (window.addEventListener) {

                    //为window注册message事件并绑定监听函数

                    window.addEventListener('message', receiveMsg, false);

                }else {

                    window.attachEvent('message', receiveMsg);

                }

            };

        </script>

    </body>

    </html>

 

————————————————

版权声明：本文为CSDN博主「辛末子午」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/hjjoe1213123/article/details/51698404

 

 

分享到：
| Thymeleaf 模板引擎简介 与 Spring Boot ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    解决window.showModalDialog跨域返回值

    为了解决这个问题，我们可以利用`iframe`嵌套页面的技术来实现跨域通信。 首先，我们来看一下`window.showModalDialog`的基本用法。在站点1（系统1的访问页面）中，我们可以通过以下代码弹出一个模态对话框： ```...

    在vue中实现嵌套页面(iframe)

    如果`iframe`需要从Vue父页面获取数据，可以通过传递URL参数或者使用`postMessage` API来实现跨窗口通信。以下是一个简单的请求示例： ```javascript function PcCommon() { this.baseUrl = 'https://xxxxxxx'; //...

    页面中iframe相互传值传参

    首先，要在不同浏览器中实现iframe的相互传值传参，我们可以通过全局对象window来引用父窗口和子窗口。在iframe中，可以通过window.parent获取到父窗口的对象，而在父窗口中，则可以通过window.frames数组来访问特定...

    JS子页面掉父页面

    在JavaScript编程中，"子页面调用父页面"是一种常见的交互方式，特别是在构建多级页面结构或者使用iframe嵌套页面的场景下。这种技术允许子页面与包含它的父页面进行通信，实现数据传递、功能控制等多种功能。下面将...

    HTML5 postMessage

    1. **页面嵌套通信**：一个页面内的`iframe`与父页面之间的通信，或者多个`iframe`之间的通信。 2. **窗口通信**：比如打开的新窗口或标签页与原窗口之间的通信。 3. **Web应用与浏览器扩展通信**：Chrome插件可以与...

    iframe应用

    父页面可以通过`iframe.contentWindow.postMessage`向子页面发送消息，子页面也可以通过`window.parent.postMessage`向父页面发送消息。 ```javascript // 父页面向子页面发送消息 iframe.contentWindow.post...

    iframe跨域嵌套自适应高度

    ### iframe跨域嵌套自适应高度 在网页开发过程中，`...正确地配置CORS、合理地利用postMessage API以及理解P3P头的作用，可以帮助开发者有效解决`iframe`跨域嵌套中遇到的问题，实现更加灵活和安全的Web应用开发。

    跨域弹窗传值

    此外，如果父窗口和子窗口是嵌套关系（例如，子窗口在iframe中），可能还需要处理`window.parent`和`window.top`的关系，以确保消息能正确地传递到顶层窗口。 在你提供的压缩包文件`testOpen`中，可能包含了实现...

    iframe 跨域解决方法

    6. **`Window.postMessage` 和 `hashchange`事件**：利用`iframe`的`src`属性设置为带有#的URL，然后监听`hashchange`事件，通过改变URL的哈希值传递数据。 在提供的文件中，我们看到`index.html`可能是包含`iframe...

    iframe父与子、子与子之间控制以及js相互调用实际例

    - `window.postMessage()` 方法：这是一个安全的跨域通信方式，允许两个窗口（包括iframe）之间传递消息。通过指定目标窗口的`window`对象和传递的数据，可以实现通信。 2. **子页面与父页面的通信：** - `parent...

    javascript iframe parent？

    JavaScript中的iframe和parent之间的交互是Web开发中一个重要的知识点，特别是在构建复杂的网页应用或实现跨域通信时。本文将深入探讨这个主题，并结合标签“源码”和“工具”，给出实际应用示例。 首先，iframe...

    模态窗口 跨域获取返回值

    当SiteB需要向SiteA传递数据时，可以在其页面中使用`window.parent`或`window.top`对象来引用父窗口或顶级窗口，并调用`postMessage`方法发送数据。SiteA则在IFRAME加载完成后注册事件监听器，接收到消息后进行处理...

    iframe多层级自动适应高度

    当`iframe`中的内容加载完成后，它可以通过`postMessage`发送一个消息到父页面，告知其自身的真实高度。父页面监听到这个消息后，可以动态调整`iframe`的高度。 例如，假设我们有如下的层级关系：主页面（main.html...

    被打开页面操作父页面上的控件

    - 对于跨域场景，可以使用`window.postMessage()` API，这是一个安全的方法，允许不同源的窗口之间进行通信。子页面可以发送消息，而父页面通过监听`message`事件接收并处理这些消息。 7. **异步考虑**： - 当...

    借助于网上messenger.js完成可以跨域的Html嵌套调用

    它基于浏览器的`window.postMessage` API，这是一个安全的方法，允许来自不同源的脚本通过`postMessage`方法发送消息，并通过事件监听接收这些消息。`messenger.js`简化了这个过程，提供了一种更加友好的API，使得...

    拖拽一个iframe中的div 在另一个iframe页面中显示

    但如果是同源的，我们可以利用window.postMessage方法来传递信息。这个方法允许在不同的窗口（包括iframe）之间安全地发送消息。接收端需要监听`message`事件来接收发送过来的数据。 对于本例中描述的场景，我们...

    窗口 之间 的 通信

    2. `window.parent`和`window.top`: 如果一个窗口嵌套在其他窗口或框架中，可以使用`window.parent`访问父窗口，`window.top`访问顶级窗口。同样，这些方法也需要遵守同源策略。 三、Web存储 1. `localStorage`和`...

    frame之间以及子页面和父页面间参数传递

    - `postMessage`是一种跨源消息传递API，可以实现在不同来源的`window`对象之间发送消息。这种方法可以避免跨域限制问题。 - 使用步骤包括： 1. **发送方**调用`window.postMessage`方法发送消息。 2. **接收方*...

    iframe内嵌页table内容显示不受受浏览器字体大小设置影响解决

    这可以通过跨窗口通信（例如`window.postMessage`）实现。 3. **设置iframe样式**：直接在iframe标签中添加`style`属性，如`&lt;iframe src="..." style="font-size: inherit;"&gt;`，让iframe继承父页面的字体大小。 4....

    Iframe的相关介绍.docx

    它的主要功能是实现页面内的页面嵌套，即在一个页面中展示另一个独立的页面内容，从而达到复用、组合或隔离不同来源内容的目的。`Iframe`在多个场景下都有其独特的应用价值，但也存在一些缺点和潜在问题。 **Iframe...

Magicbox
Global site tag (gtag.js) - Google Analytics