vue页面中嵌入iframe外源地址页面监听iframe 中事件

末蓝、 2021-08-26 23:35 2913阅读 1赞

1.需求 vue中需要嵌入iframe 地址是第三方的 当iframeh中页面点击的时候.vue需要监控到这个事件将本页面关闭.代码中 js 发送和接收方法

//vue组件中是个弹框
    <template>
     <el-dialog title="编辑" :visible.sync="editDialog" center :fullscreen="true" append-to-body v-loading="loading">
          <iframe :src="iframeurl" frameborder="0" style="width:100%;" :height="height"></iframe>
     </el-dialog>
    </template>
    
    <script>
    export default{
    data(){
       return{
         iframeurl:"******"  //第三方页面地址
            }
         },
       mounted:{
         //监听iframe变化
            window.addEventListener('message', (eve) => {
            console.log(eve)
           })
    
       }
    
     }
    </script>
    
    
    //第三方页面 比如纯html  页面
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Demo</title>
        <meta charset="utf-8">
        <style>
         
        </style>
    </head>
    <body>
    <button id="btn">向vue组件发送数据</botton>
    </body>
    </html>
    <script>
    document.on("click","#btn",function(){
       window.parent.postMessage({  //参数是对象
                cmd: '***',
                params: {
                  success: true              
                }
            }, '*');
     })
    
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，2913人围观）

还没有评论，来说两句吧...

相关阅读

相关 021：vue中watch监听页面变化动态设置iframe元素的高度

![在这里插入图片描述][32d2a1d099334cfba6adc4f84dd79e22.png_pic_center] 第021个查看专栏目录: [VUE][] —

ゞ浴缸里的玫瑰/ 2024年03月16日 20:35/ 0 赞/ 52 阅读

相关监听iframe中的DOMContentLoaded事件

是不可以的… 虽然可以获得iframe的document对象 var frameDoc = document.getElementById('iframeViewP

系统管理员/ 2022年12月31日 11:27/ 0 赞/ 146 阅读

相关 vue2.0 + element-ui +iframe在页面中嵌入外部网站

![913e102c04da635c204a60485cc03cd8.png][] 自从用饿了么框架重构项目以来，遇到很多问题，我都有一一记录下来，现在特喜欢这个框架，说实

╰+哭是因爲堅強的太久メ/ 2022年12月26日 11:20/ 0 赞/ 147 阅读

相关 Vue如何在iframe中刷新\关闭整个页面

vue：  <div class="read_heton" v-if="packOff"> <iframe src="

淡淡的烟草味﹌/ 2022年12月02日 03:56/ 0 赞/ 349 阅读

相关 iframe框架中的页面刷新

　1，reload 方法，该方法强迫浏览器刷新当前页面。　　语法：location.reload(\[bForceGet\]) 　　参数： bForceGet，可选参数

我就是我/ 2022年07月16日 00:52/ 0 赞/ 244 阅读

相关 html中嵌入iframe进行父子页面参数传递

实现的主要原理是： 1.父页面调用子页面函数，选择iframe的id + contentWindow +子页面的函数名（\[参数列表\]） 2.子页面调用父页面函数，win

àì夳堔傛蜴生んèń/ 2022年05月18日 04:46/ 0 赞/ 626 阅读

相关 jQuery Iframe 父页面监听子页面的鼠标点击事件

一、父页面加入iframe： <body> <iframe id="ifrmReport" src="/ReportForm/ZKZProblemSummaryPartia

墨蓝/ 2022年05月15日 08:34/ 0 赞/ 1122 阅读

相关修改iframe页面中的css

在一个html页面中(a.html)使用iframe引入另外一个页面（b.html），有时候我们需要修改ifram页面的样式，该如何操作呢？假设我们没有修改b.html页面的权

太过爱你忘了你带给我的痛/ 2021年09月02日 03:31/ 0 赞/ 463 阅读

相关 vue页面中嵌入iframe外源地址页面监听iframe 中事件

1.需求 vue中需要嵌入iframe 地址是第三方的当iframeh中页面点击的时候.vue需要监控到这个事件将本页面关闭.代码中 js 发送和接收方法 //

末蓝、/ 2021年08月26日 23:35/ 1 赞/ 2914 阅读

相关 react组件中通过iframe嵌入html页面

最近在一个web前端开发的项目中，遇到了这样一个需求：项目本身使用react搭建，用antd来完成各种组件的展示，有一个需求，是要将另外一个项目中的部分页面功能加进来，另外的一

系统管理员/ 2021年05月12日 11:50/ 0 赞/ 1267 阅读