iframe 里调用vue方法

最新推荐文章于 2025-06-08 00:03:24 发布

qq_35187119

最新推荐文章于 2025-06-08 00:03:24 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_35187119/article/details/121357202

调用

window.parent.iframeFunction()

vue

export default {
    mounted() {
        window.iframeFunction = this.iframe
    },
    methods: {
        iframe(data) {
            console.log('被调用的方法----------iframe_________' + data)
        }
    },
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_35187119

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

2.（vue3.x+vite）调用iframe的方法（vue编码）

GIS之家家长

09-14

627

11.（vue3.x+vite）调用iframe的方法（vue编码）

如何在vue中使用iframe（操作节点）+不操作节点只是用VUE

woshi759956817的博客

03-17

1301

需求：点击播放区域后在点击监控即可呈现播放区域 HTML  <div v-if="video == 4" class="content"> <div class="contvidef" :style="{ height: windowHeight / 2.06 + 'px', width: parseInt(windowWidth / 2.05) + 'p

参与评论您还未登录，请先登录后发表或查看评论

vue项目中，调用iframe子网页中的方法和在iframe子页面中调用vue父页面中的方法。

HeavenPeakMan的博客

04-26

3045

可以看到，调用子页面方法的关键在于获取到iframe元素对象后的contentWindow属性，所以这里使用了$refs ，如果使用dom方法获取也是可以的。targetOrigin为指定哪些窗口能接收到消息事件，可以为’*’，但是这样很不安全，建议根据实际项目精确匹配。而父页面则只需要添加事件监听器，在回调中执行需要执行方法或者使用参数。message为需要传递的信息，'我是父页面中的方法！

iframe（概念、简单例子、在vue项目中的使用）

最新发布

HuoZhiyan 的博客

06-08

2042

本篇文章，我们认识iframe，并学习简单例子和其在vue项目中的使用（附源码）。

在iframe里面调用vue的方法

weixin_30654583的博客

03-29

1208

<!doctype html> 在iframe里面调用vue的方法 vue中 let self = this; window["goBack"] = () => { self.goBack(); }; ...

【vue页面调用iframe嵌入页面方法并且传值，iframe里调用外部vue页面方法】

qq_43027559的博客

08-25

4708

需求：vue项目里嵌入iframe页面，需要调用iframe页面里的方法并且把值传入进去来进行执行后续操作，如执行成功，需要在返回调用外部vue页面方法。提示：以下是本篇文章正文内容，下面案例可供参考一、具体代码提示：这里我把外部调里，里调外我都整合在一起写了，具体看注解。

2.（vue3.x+vite）调用iframe的方法（vue编码）.rar

09-22

前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725

Vue中对iframe实现keep alive无刷新的方法

10-16

通过上述方法，就可以在Vue项目中实现iframe内容在路由切换时的无刷新保持，同时避免了每次需要手动引入与注册iframe页面组件的繁琐操作，使得代码更加简洁且易于管理。综合以上内容，我们可以了解到，虽然Vue提供...

在iframe中调用js父页面和子页面方法

08-08

本篇文章将深入探讨如何在`iframe`中调用JavaScript，实现父页面与子页面之间的方法交互。一、iframe的基本使用在HTML中，我们可以通过`<iframe>`标签来插入一个框架，例如： ```html <iframe src="child....

vue与iframe之间的信息交互的实现

10-15

在 Vue 中，我们可以获取到 iframe 的 `contentWindow` 对象，然后通过这个对象调用 `postMessage` 方法来发送信息。例如： ```html <iframe ref="iframe" src="https://example.com"></iframe> ``` 在 Vue 的实例...

通过 iframe引用的vue文件之间的方法互调

localhost_1314的博客

07-17

7014

假设有两个文件 general.vue(这是一个vue多入口生成的实例,会被打包为一个单独的general.html) generalPage.vue(这个文件通过iframe引入general.html) 那么,如何在general.vue里触发generalPage.vue中的方法vueFun? 方法如下: 1.在general.vue中通过parent.vueFun(params)...

iframe 中子页面调用父页面的Vue方法并正确传参

皮一下很开心的猴头

05-15

1万+

父页面的代码 html <div id="app"> //省略业务代码x行..... <iframe src="/sonpage" > //省略业务代码x行..... </div> vue var vm = new Vue({ el:'#app', data:{ }, mounted: function () { ...

Vue中使用iframe引用html页面实现vue和html页面方法的调用

JAVA-XH

07-14

9936

当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时，我们可以使用iframe去引用html页面，实现他们的交互首先我们可以再vue页面中使用标签引用html页面 <template> <div> <iframe name="iframeMap" id="iframeMapViewComponent" width="100%" height="470px" v-bind:src="smgH

iframe 子页面调用父页面的方法（配合vue使用）

weixin_30367543的博客

04-10

1228

父页面代码： html: 　　　　<div id="app"> //省略业务代码x行..... <iframe src="/sonpage" > //省略业务代码x行..... </div> vuejs: var vm = new Vue({ 　　e...

Vue项目与iframe的结合

weixin_45357101的博客

09-08

2196

背景最近参与的一个Vue项目要改造，原本是普通管理后台项目，现在因为有业务扩展需求（实际上就是一个新的项目，但是要基于现有的UI、权限以及用户等功能，只是一部分业务不一样，两个项目必须要是同一个入口），要把菜单和头部以及一部分公共业务（比如用户、日志、权限、登录等等）拿出来新开一个项目，把原有的业务迁到另一个项目，当然，新的业务也会新开一个项目。说白了就是三个项目合成一个（Ps：缝合怪），项目入口理所当然是公共的那一部分，右下方的业务展示部分采用了iframe展示的方案，具体方式是参考Layui Adm

vue+iframe的实现思路