vue项目嵌套iframe怎么实现发送、接收数据

发布时间:2022-06-01 09:28:10 作者:iii
来源:亿速云 阅读:1471

这篇文章主要介绍“vue项目嵌套iframe怎么实现发送、接收数据”,在日常操作中,相信很多人在vue项目嵌套iframe怎么实现发送、接收数据问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目嵌套iframe怎么实现发送、接收数据”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

vue嵌套iframe发送、接收数据

<template>
    <div class="home">
        <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe>
    </div>
</template>
<script>
    export default {
        mounted() {
            let mapFrame = this.$refs['mapFrame']
            if (mapFrame.attachEvent){  //兼容浏览器判断
                mapFrame.attachEvent("onload", function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage({
                        method: 'getBaseInfo',
                        data:'我是vuex state的数据'
                    },'*')
                })
            } else { 
                mapFrame.onload = function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage({
                        method: 'getBaseInfo',
                        data:'我是vuex state的数据'
                    },'*')
                } 
            }
            
        }
    }
</script>
<style scoped lang="stylus">
.home {
    .mapFrame {
        height: 300px;
        width: 500px;
    }
}
</style>

子页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iframe嵌套网页测试</title>
</head>
<body>
    <script>
        window.addEventListener('message',function(e){
            console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
            console.log(e.origin,e.data)
        })  
        // window.postMessage({
        //     method:'localtest',
        //     data:'ddddddddddddddddddddddddddddd'
        // },'*')
    </script>
</body>
</html>

vue中iframe的使用

iframe在同域时能自由操作iframe和父框架的内容(DOM),在跨域时可以实现页面跳转。

<iframe id="iframe" :src="iframeSrc"  width="100%" frameborder="0"></iframe>

获取iframe里面的内容

const _iframe = document.getElementById('iframe').contentWindow

CDM跨域

如果你设置的iframe的域名和你top window的域名完全不同,可以使用CDM(cross document messaging)进行跨域消息的传递。

发送消息: 使用postmessage方法 

postMessage(message, targetOrigin)
_iframe.postMessage(JSON.stringify(_obj), '*')

接受消息: 监听message事件

当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性,data,origin,source.

window.addEventListener('message', function (event) {
      console.log(event)
      if (event.origin === window.callBackUrl.iframeSrc) {
        _this.childData = event.data
        console.log(event.data)
        _this.saveForm()
      }
    })

到此,关于“vue项目嵌套iframe怎么实现发送、接收数据”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. python udp协议发送接收数据
  2. 发送与接收短信

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue iframe

上一篇:Java如何实现PDF转HTML/Word/Excel/PPT/PNG

下一篇:Redis入门基础常用操作命令实例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》