vue内嵌iframe并跨域通信

最新推荐文章于 2024-06-25 15:22:52 发布

大橙子Gsc

最新推荐文章于 2024-06-25 15:22:52 发布

阅读量9.1k

点赞数 5

分类专栏：前端 VUE 文章标签： iframe跨域通信

前端同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

VUE

7 篇文章 0 订阅

订阅专栏

[转载博客地址 https://blog.csdn.net/weixin_44242600/article/details/89248049]
1、Vue引入iframe：直接通过添加iframe标签，src属性绑定data中的src。
           <template>
           <div class="act-form">
           <iframe :src="src"></iframe>
           </div>
           </template>
           <script>
           export default {
           data () {
           return {
           src: 'src地址'
           }
           }
           }
           </script>
2、vue获取iframe对象以及iframe内的window对象：通过ref获取
       <template>
       <div class="act-form">
       <iframe :src="src" ref="iframe"></iframe>
       </div>
       </template>
       <script>
       export default {
       data () {
       return {
       src: 'src地址'
       }
       },
       mounted () {
       // iframe的对象
       console.log(this.$refs.iframe)
       // iframe的window对象
       console.log(this.$refs.iframe.contentWindow)
       }
       }
       </script>
3、vue向iframe内传送信息：通过postMessage
       <template>
       <div class="act-form">
       <iframe :src="src" ref="iframe"></iframe>
       <div @click="sendMessage">向iframe发送信息</div>
       </div>
       </template>
       <script>
       export default {
       data () {
       return {
       src: 'src地址',
       iframeWin: {}
       }
       },
       methods: {
       sendMessage () {
       // 外部vue向iframe内部传数据
       this.iframeWin.postMessage({
       cmd: 'getFormJson',
       params: {}
       }, '*')
       }
       },
       mounted () {
       // 在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessage
       window.addEventListener('message', event => {
           // 根据上面制定的结构来解析iframe内部发回来的数据
           const data = event.data
           switch (data.cmd) {
           case 'returnFormJson':
           // 业务逻辑
           break
           case 'returnHeight':
           // 业务逻辑
           break
           }
       });
       this.iframeWin = this.$refs.iframe.contentWindow
       }
       }
       </script>
4、iframe内向外部vue发送信息：
       <!DOCTYPE html>
       <html lang="en">
           <head>
           <meta charset="utf-8">
           <title>iframe Window</title>
           <style>
           body {
           background-color: #D53C2F;
           color: white;
           }
           </style>
           </head>
           <body>
           <h1>Hello there, i'm an iframe</h1>
           <script>
           // 向父vue页面发送信息
           window.parent.postMessage({
           cmd: 'returnHeight',
           params: {
           success: true,
           data: document.body.scrollHeight + 'px'
           }
           }, '*');
           // 接受父页面发来的信息
           window.addEventListener("message", function(event){
           var data = event.data;
           switch (data.cmd) {
           case 'getFormJson':
           // 处理业务逻辑
           break;
           }
           });
           </script>
           </body>
       </html>

大橙子Gsc

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue内嵌iframe并跨域通信

[转载博客地址 https://blog.csdn.net/weixin_44242600/article/details/89248049]1、Vue引入iframe：直接通过添加iframe标签，src属性绑定data中的src。 <template> <div class="act-form"> ...
复制链接

扫一扫

专栏目录