iframe 页面传值

chengchong_cc

于 2023-06-01 17:19:27 发布

阅读量74

点赞数

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/chengchong_cc/article/details/130992466

版权

vue 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

该文章展示了一个测试页面，其中包含一个iframe和一个按钮。当点击按钮时，它会向iframe的内容窗口发送一个message事件，携带类型为region的数据。在接收方，已经设置了一个事件监听器来接收并处理这些消息，用于改变地图区域。然而，注释提到在绑定事件处理函数时可能存在问题，可能影响方法的正常执行。

摘要由CSDN通过智能技术生成

发送方（测试页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            height: 100%;
        }
    </style>
</head>
<body>
    <iframe id="iframe" src="http://192.168.3.38:1888/#/wel/index" frameborder="0" style="width:100%;height: 80%;"></iframe>
    <button id="btn">提交</button>

    <script>
        let btn = document.getElementById('btn')
        let iframe =  document.getElementById("iframe");
        btn.addEventListener("click",()=>{
            console.log(1111);
            iframe.contentWindow.postMessage({type:'region',data:{areaCode:'320481'}}, '*');
        })
    </script>
</body>
</html>

接受方

 mounted() {

      window.addEventListener('message', function(event) {
        console.log(event.data.data.areaCode);
        this.changeMap(event.data.data.areaCode);
      }.bind(this))

    },

注意最下面的bind(this) 如果掉方法不起作用