vue iframe里页面调用父级的方法

最新推荐文章于 2024-01-24 11:04:06 发布

原创最新推荐文章于 2024-01-24 11:04:06 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

36 篇文章

订阅专栏

这篇博客探讨了如何在iframe内部实现调用父级页面中Vue实例的方法。通过示例代码展示了`clickMore`函数如何传递参数到父级的`To`方法，详细阐述了父子组件间通信的实现机制和技术细节。

iframe 内

调用父级方法

clickMore(id, title) {
                    parent.index.To("XXXXXXXXXXXXXXXXXXXXX" + id, id, title)
                }

iframe 外

var index = new Vue({
methods: {
To(url, id, name) {。。。}
}
})

parent.index.To()

index是父级的vue的变量 To父级对应的方法

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陈熙之

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

08-08

NULL 博文链接：https://747017186.iteye.com/blog/1985110

iframe子父页面调用js函数示例

10-26

iframe子页面调用父页面js函数及iframe父页面调用子页面js函数在实际项目中都是很实用的，下面有个不错的示例，感兴趣的朋友可以了解下

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

Vue，嵌入iframe中的子页面，调用父页面方法

彭珂个人网的博客

01-06

6261

父页面：a.vue 中，嵌入了 iframe 标签，src为子页面路径：二、假设子页面是 b.vue 那么在子页面中，想要调用父页面中的 homePageCallBack 方法，如果你是前端开发者，子调父的方法一般会尝试： 1、window.parent.homePageCallBack();2、this.$parent.homePageCallBack();等等实际上，你也是因为上面的方式，无法调用成功，才来搜的，哈哈哈哈~1、首先在父页面 a.vue 中的mounted中加入如下代码：其

Vue中，iframe中的子网页，调用父网页的方法

程先生的博客

09-13

3595

iframe中的子网页，调用父网页的方法

vue项目中iframe子页面调用父页面的方法

weixin_43734732的博客

03-31

6841

父页面的结构 <el-tab-pane label="派单流程" name="3"> <iframe ref='3' width="100%" height="480px" :src=dispatchUrl></iframe> </el-tab-pane> 父页面中的方法 methods: { ...

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

weixin_30367543的博客

04-10

1236

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

vue2 js iframe向父级页面暴露方法

11-30

在Vue.js 2中，如果你想要在一个iframe中创建一个JavaScript应用，并希望这个应用能够通过API与父级页面通信，你可以使用`postMessage` API实现跨域通信。首先，你需要在父级页面设置一个接收消息并触发相应处理函数...

iframe 页面中获取父级页面的 localStorage 或者 sessionStorage数据

jiangjunyuan168的博客

01-24

7026

在开发的过程中遇到需要在 iframe 页面中获取父级页面系统所存储的本地数据的需求。由于浏览器的安全策略，是不允许 iframe 页面直接获取系统的存储数据的，那么要如何解决呢？

react17同源iframe父子页面相互调用方法

weixin_42738504的博客

08-08

2033

最近制作一个大数据展示页面，需要嵌套第三方html，并进行相应的交互。如下图：其中A页面需要与第三方iframe进行交互，同时iframe选择公司或者园区时会回显到树选择器中。先上解决办法 1，利用iframe进行父子页面通信，相互调用父子页面中的方法。（同源）首先，我在index.js中把第三方需要调用我的方法挂载到window中 // 与3d交互的文件 import {webGl_web_iconClick} from '../src/http/webgl_web_iconClick' win

vue iframe调用其他平台的html，子级怎么调用父级多个函数

最新发布

12-06

// 子级调用父级方法 } }, }, } ``` 3. 允许跨域通信（如果需要）：如果子页面（iframe）试图向父页面发送消息，可能因为同源策略而受限。这时可以借助于`postMessage` API 或者 JSONP 来实现跨域数据传递...

html的iframe跨域嵌套vue项目页面，使用postMessage的方法实现父子页面传值

qq_21382609的博客

10-29

1751

当前应用场景：u3d和前端项目对接，需要使用到前端的设置页面和详情功能，需要操作前端项目的方法，比如打开vue项目的弹窗，修改详情的数据等操作，当前记录的是修改vue页面的数据操作。vue项目使用技术：vue和less编写样式，html页面使用技术：html5和javascript 使用方案：postMessage的方法 vue向iframe发送数据的方法： sendMessage(data) { //子向父发送数据 window.parent.postMessage(

vue-iframe获取父级域名

08-05

1042

iframe获取父级域名做对应的判断

vue使用ifram标签解决父子页面传值，触发事件的操作

龘

10-29

3061

1、首先需要明确的一点，标题所说的子页面调用父页面的方法或者函数，是需要父子页面配合的。如果子页面不是你自己开发的，或者父页面不是自己开发的，那就没办法调用了。而且，因为业务的特殊需要，我们用到了iframe，如果只是Vue两个父子组件的传值或者调用，其实是非常简单的，百度一下，就能出现很多。在明确了以上的点以后，开始这一次的分享。首先先说一下，没有在Vue框架中，就是单纯的HTML页面，子页面调用父页面的函数，其实非常的简单。在子页面中，有一个windows.parent的方法。

vue项目使用 iframe 父子页面传值。

weixin_45665171的博客

09-18

2167

vue项目使用 iframe 父子页面传值。

关于iframe调用父窗口的元素和方法

王小鬼的博客

11-24

1065

使用jquery框架:jquery-1.11.1.min.js 在子窗口的JS: $(function(){ $(btn).click(function(event){ if(self!=parent){ alert(parent.$('#myDiv').html()); parent.ss(); }

vue 引入其他页面后获取父页面参数_vue中页面、父子组件、兄弟组件之间的传参...

weixin_30975527的博客

12-23

1066

1、页面之间的传参可以利用本地存储localStorage，将需要传过去参数在本地存储中进行保存，localStorage.setItem("参数名"，参数值)然后再到另外一个页面中获取。localStorage.getItem("参数名")所有页面之间使用。注意：如果页面之间是用v-if的形式切换的话，每次切换的时候都会重新加载数据，重新渲染页面，所以为了不频繁操作数据，可以判断本地存储中是否存...

iframe子页面调用父页面js函数

weixin_30292843的博客

12-07

525

window.parent.document.getElementById("test").value;jQuery方法为：$(window.parent.document).contents().find("test").val(); 例: 父: <div id="page-wrapper" class="gray-bg dashbard-1"> &lt...

iframe引用父页面样式_iframe中父项的样式

cunbei2644的博客

09-27

1540

Here's a JavaScript that let's you style an iframe just like its top parent. The script is basically just a proof of concept I did after talking to a friend about similar problem he has had in the pas...

vue.js如何判断父组件还是子组件

谁偷了我的小熊饼干

06-15

1617

而在组件定义中局部注册的组件只能在定义它们的组件内部使用，因此它们可以被视为子组件。如果一个组件定义了事件并通过 $emit 触发了该事件，那么它可以被视为子组件，而监听并处理了该事件的组件可以被视为父组件。如果一个组件在定义时接收了父组件传递的 props，并在模板中使用了这些 props，那么它可以被视为子组件。组件嵌套关系：通常情况下，组件嵌套的层次关系可以用于判断父组件和子组件。如果一个组件被包含在另一个组件的模板中，那么被包含的组件就是子组件，而包含它的组件就是父组件。