非vue子页面调用vue父页面方法

由于要使用之前项目使用的页面，需要从非vue iframe子页面调用vue项目
1.父页面

  <iframe :src="value.urlPath" frameborder="0" width="900px" height="500px"></iframe>methods: {add(type,name,url){//console.log("父页面方法实现");}, handleMessage (event) {const data = event.data.data;if(data !== undefined){if(data.code === "success"){console.log("子页面传来------")console.log(data.data);this.add(data.data.type,data.data.name,data.data.url);}}},},mounted() {window.addEventListener('message', this.handleMessage);},

子页面

        <button onclick="addstruct()">添加快捷项</button><script>function addstruct(){console.log("点击");// 向父vue页面发送信息window.parent.postMessage({data: {code:"success",data:{type:'0',name:'百度',url:'https://www.baidu.com/s?wd=abc'}}}, '*');}</script>

这样就可以实现非vue子页面调用vue父页面方法

非vue子页面调用vue父页面方法相关推荐

vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法
子级组件中的实现组件名称:EditTable.vue export default{ name:'ET', ....... methods:{ ShowMore(step){ ...
父页面调用子页面方法, 子页面加载父页面传送的数据
先看效果图就明白需求了: 点击search查询结果集, 点击某一条将该条的其他信息分别加载到tab1和tab2中, 即net bill和other amount这两个tab. 点击clear清空查询条 ...
vue 子组件调用、触发父组件中的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 我发现了两种写法. 方法一: 子组件: <template><button @cl ...
window.showModalDialog关闭子页面后刷新父页面
父页面方法: function addbz(id){ var url="${ctx}/erp/pmDesign/pmDesign/addBZ.ht?id="+id; ...
php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...
iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易, ...
layer中嵌套的页面如何操作父页面_layui框架中layer父子页面交互详细解说
本文主要介绍了layui框架中layer父子页面交互的方法,结合实例形式分析了layer父子页面交互的常用技巧以及layer弹出多个iframe找到父页面的操作方法,需要的朋友可以参考下,希望给大家的 ...
html 动态调用php文件,html静态页面调用php文件的方法
html静态页面调用php文件的方法本文实例讲述了html静态页面调用php文件的方法.分享给大家供大家参考.具体方法如下: 静态页面中看上去好像是不能直接调用php文件的,但是却可以使用js调用方 ...
jQuery如何去判断页面是否有父页面？
jQuery如何去判断页面是否有父页面? 是要判断当前页面是否被嵌入在frame里吗? 1 2 3 if (top != self) { alert('我在框架里'); } 转载于:htt ...
Vue子组件调用父组件方法并传参的5种方式：$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
如需了解老子怎么控制儿子的,传送门:https://s-z-q.blog.csdn.net/article/details/119922715 子组件child.vue <template> ...

非vue子页面调用vue父页面方法

非vue子页面调用vue父页面方法相关推荐

最新文章

热门文章

非vue子页面 调用vue父页面方法

非vue子页面 调用vue父页面方法相关推荐

最新文章

热门文章

非vue子页面调用vue父页面方法

非vue子页面调用vue父页面方法相关推荐