vue页面内嵌iframe使用postMessage进行数据交互(postMessage跨域通信)

这篇具有很好参考价值的文章主要介绍了vue页面内嵌iframe使用postMessage进行数据交互(postMessage跨域通信)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是postMessage

postMessagehtml5引入的API,它允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.

vue父页面(嵌入iframe的页面)

在vue中要使用iframe上的postMessage,首先应该获取到iframe实例,有以下几种方式

<iframe :src=“flowSrc” name=“myiframe” ref=“myiframe” id=“myiframe” style=“min-height:800px; width:100%;margin:0;border:0;”> </iframe>

   let iframeWin1 = window.frames["myiframe"];
   let iframeWin2 = this.$refs.myiframe.contentWindow;
   let iframeWin3 = document.getElementById("myiframe").contentWindow;

重点: 将iframe的window窗体存储至data对象中会出现跨域报错
重点: 将iframe的window窗体存储至data对象中会出现跨域报错
重点: 将iframe的window窗体存储至data对象中会出现跨域报错
重要的事情说三遍!!!!
也不要用这个方式刷新iframe
let iframeWin2 = this.$refs.myiframe.contentWindow;
iframeWin2.location.reload()
这样操作也会导致跨域
vue页面内嵌iframe使用postMessage进行数据交互(postMessage跨域通信)
在这里踩坑了,明明postMessage是支持跨域通信的,但是我在用的时候还是报跨域了,原因就是上述所说的。

父页面传递数据给子页面(vue->iframe)

<template>
  <div class="home">
    <div class="search-container">
      <el-input placeholder="请输入内容" v-model="inputValue" clearable class="mind-input">
      </el-input>
      <div class="search-btn">

        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="ifarm-container">
      <iframe :src="flowSrc" name="myiframe" ref="myiframe" id="myiframe" style="min-height:800px; width:100%;margin:0;border:0;"> </iframe>
    </div>

  </div>
</template>

<script>


export default {
  name: 'HomeView',
  data() {
    return {
      inputValue: '',
      flowSrc: null,
    }
  },
  created() {
    this.flowSrc = 'http://localhost/login';  //直接给flowSrc赋值链接
  },
  mounted() {
    // this.passOnIframeData()
  },
  methods: {
    search() {
      this.sendMessage(this.inputValue)
    },
    // 给iframe传递数据
    sendMessage(msg){
        let iframeWin = window.frames["myiframe"];
        //将iframe的window窗体存储至data对象中会出现跨域报错
        iframeWin.postMessage(msg,"*");
    },
   
  }
}
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .search-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .mind-input {
      width: 500px;
    }

    .search-btn {
      flex: 1;
      margin-left: 20px;
    }
  }

  .ifarm-container {
    width: 98%;
    min-height: 800px;
    margin-top: 20px;
    border: 1px solid rgb(175, 171, 171);
  }
}
</style>


子页面接收父页面数据(iframe接收vue传递过来的数据)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe跨域子页面</title>
</head>
<body>
    <div id="mydiv">
        vue、iframe、postMessage跨域子页面
    </div>
</body>
<script>
    //监听message事件,采用冒泡传递方式
    window.addEventListener("message",receiveMessage,false);
    function receiveMessage(event){
        let data = event.data
        console.log('我是父页面传递过来的', data)
        document.getElementById("mydiv").innerHTML = data;
    }
</script>
</html>

子页面向父页面传递数据
在子页面中使用parent.postMessage或者window.parent.postMessage向父元页面发送消息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe跨域子页面</title>
</head>
<body>
    <div id="mydiv">
       <button onClick="sendMessage">回传数据</button>
    </div>
</body>
<script>
    function sendMessage(data){
        let data = event.data
        console.log('我是父页面传递过来的', data)
        window.parent.postMessage("回传数据----哈哈哈哈", "*")
    }
</script>
</html>

父页面接收子页面的数据文章来源地址https://www.toymoban.com/news/detail-425212.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域父页面</title>
</head>
<body>
    <div id="app">
        <iframe name="myiframe" ref="myiframe" id="myiframe" src="http://www.a.com/index.html"></iframe>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '跨域父页面',
                iframeWin: null, 
            },
            methods: {
                //处理接收的消息
                receiveMessage(event){
                    let data = event.data;
                    console.log('子组件传递过来的数据', data)
                }
            },
            created(){
                window.addEventListener("message",this.receiveMessage,false);
            },
            //vue实例销毁时销毁一些监听事件
            destroyed(){
                window.removeEventListener("message",this.receiveMessage);

            }
        })
    </script>
</body>
</html>

到了这里,关于vue页面内嵌iframe使用postMessage进行数据交互(postMessage跨域通信)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序和webview使用postMessage交互

    小程序和webview能交互,但是没有你想的那个完美 小程序向webview传递参数只能使用url携带参数 webview向小程序传递参数可以使用postMessage, 但是注意了,postMessage只会在特定的时机执行 ,请看官方文档 由此可见,如果你想点击webview中的一个按钮A,然后给小程序发消息,然后由

    2024年02月02日
    浏览(49)
  • iframe 给嵌入的 vue页面发送数据(vue2、vue3 都ok)

    这就是一个普通的网页 网页大致长这样 注意 : 这里接收事件的代码要写在 onMount() 声明周期钩子中 主要的就是进行事件监听 :window.addEventListener(‘message’, function(e) {xxxxxx})

    2024年02月06日
    浏览(38)
  • 在layui中使用vue,使用vue进行页面数据部分数据更新

    layui是一款非常优秀的框架,使用也非常的广泛,许多后台管理系统都使用layui,简单便捷,但是在涉及页面部分数据变化,就比较难以处理,比如一个页面一个提交页,提交之后部分数据实时进行更新,根据数据动态控制元素显示等。这些情况使用layui就需要自己用原始js方

    2024年02月11日
    浏览(49)
  • 与iframe进行跨域交互的解决方案

    目录 前言 使用 postMessage() 方法 使用location.hash  document.domain属性  使用window.name 属性  CORS 使用JSONP 使用WebSocket  使用WebRTC  使用中间页面  在Web开发中,为了避免安全漏洞,浏览器会实行同源策略(Same-Origin Policy),即只允许同源网页之间进行交互,而跨域的交互是被禁止

    2024年02月05日
    浏览(44)
  • 小程序内嵌H5页面,需要在H5页面进行截图保存和转发给朋友的操作

    首先在H5项目内,你需要下载 weixin-js-sdk 和 html2canvas,weixin-js-sdk 是为了在项目内可以使用wx的一些API, html2canvas 是通过canves画出你页面的base64位图片。 npm install --save weixin-js-sdk npm install --save html2canvas 注意,使用weixin-js-sdk应该是要签名的,这个让后端去生成接口去获得 然后

    2024年02月09日
    浏览(32)
  • vue3项目利用iframe展示其他页面

    iframe是html内联框架元素,它能够将另一个 HTML 页面嵌入到当前页面中。 主要属性如下: src 被嵌套的页面的 URL 地址 name 框架名称 scrolling 否要在框架内显示滚动条。值; auto(仅当框架的内容超出框架的范围时显示滚动条)、yes、no width iframe的宽度 height iframe的高度 frameborde

    2024年02月12日
    浏览(44)
  • Web自动化测试-如何进行Selenium页面数据及元素交互?教你一步不漏。

      目录 前言: 一、Selenium简介 二、安装Selenium 1.Windows用户安装Selenium 2.安装Chrome浏览器驱动 三、使用Selenium进行页面数据及元素交互 1.启动浏览器

    2024年02月07日
    浏览(47)
  • 内嵌 iframe 实现PDF预览

    效果图如下: 代码如下:

    2024年02月12日
    浏览(57)
  • iframe内嵌链接常见问题

    问题1:   Refused to display \\\'http://localhost:8080/xxx\\\'  in a frame because it set \\\'X-Frame-Options\\\' to \\\'sameorigin\\\' 出现原因 :X-Frame-Options 响应头表示浏览器是否允许一个页面在  frame、iframe、embed 、object 标签中显示。站点维护人员可以通过设置该请求头确保自己的网站没有被嵌入到别人的网站

    2024年02月06日
    浏览(44)
  • Jeecg开发框架前端VUE2数据页面与后端数据库交互实现

    ​ JeecgBoot 是一款基于代码生成器的 低代码 开发平台,零代码开发!采用前后端分离架构:SpringBoot2.x,Ant DesignVue,Mybatis-plus,Shiro,JWT。强大的代码生成器让前后端代码一键生成,无需写任何代码! JeecgBoot引领新的开发模式(Online Coding模式- 代码生成器模式- 手工MERGE智能开发

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包