vue中嵌入原生iframe并传递参数

父传子

// 父页面main.html传递参数<template>
<div>
<iframe :src="frameUrl" ref="iframe" width="100%" height="100%" frameborder="0" scrolling="auto" @load="loaded"></iframe>
</div>
</template><script>
export default {name: 'main',data(){return {            frameUrl: '../../../static/child.html',params:{id:'参数Id',name:'参数名称'},}},mounted (){var _self=this;let myFrame = this.$refs['iframe']if (myFrame.attachEvent) { // 兼容浏览器判断myFrame.attachEvent('onload', function() {const iframeWin = myFrame.contentWindowiframeWin.postMessage(_self.params,'*')})} else {myFrame.onload = function() {const iframeWin = myFrame.contentWindowiframeWin.postMessage(_self.params,'*')}}   },methods: {    loaded() {let vm = this.$refs.iframe.contentWindow.vm}}
}
</script>// 子页面child.html接收参数
<script>
var id,name;
window.addEventListener('message', (event) => {              id=event.data.id;name=event.data.name;console.log("我是父页面传递过来的******："+id+name);})
</script>

子传父

//child.html子页面传参<script>
window.parent.postMessage({params: {id: '子页面Id',name:'子页面名称'}}, '*')
</script>//main.html父页面接收<script>
mounted (){let id,name;window.addEventListener("message", (event) => {               id=event.data.id;name=event.data.name;console.log("******"+id+name);})
}
</script>

参考网址：https://zeyu7.com/vue-iframechuan-zhi/

vue中嵌入原生iframe并传递参数相关推荐

Vue route页面跳转，传递参数接收到的参数为空
Vue在处理页面跳转传递参数的时候 var devId = row.id; this.$router.push({ name: '/showDevs/devDetail' ,params:{" ...
[html] 在两个iframe之间传递参数的方法有哪些？
[html] 在两个iframe之间传递参数的方法有哪些? 通过postMessage与父级通过,父级传递消息通过websocket通信如果是同一个域名下可用stroage,监听storageChan ...
vue.js 编程导航，如何传递参数？
本文主要讲述:关于vue.js 编程导航,如何传递参数? 本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且 ...
[html] 在两个iframe之间传递参数的方法有哪些
[html] 在两个iframe之间传递参数的方法有哪些通过postMessage与父级通过,父级传递消息通过websocket通信如果是同一个域名下可用stroage,监听storageChang ...
六十一、Vue中父子组件传值和组件参数校验
@Author:Runsen @Date:2020/10/17 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的日积月累,需要强大 ...
Antd-Design List渲染列中Button 点击事件传递参数
背景:使用List 渲染的后台数据列表中,点击删除按钮,可以将该项对应的主键传递给函数点击删除的时候,将该条商品记录对应的id 传递给函数,通过调用后台接口删除可以看到的是关键代码: onCli ...
Vue系列：通过vue-router如何传递参数
使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: ( ...
vue 中嵌入iframe页面
使用的是vue-element-admin. 需求项目需求是在点击左边侧边栏的时候判断如果是外部的页面之后,将此页面在右侧打开,每打开一个,tagview中也会相应加上,当切换这些tagview时, ...
JSF中的h:commandLink如何传递参数三种取值比较
声明本人刚学jsf三天如有不足请指教.... 本人总结了三种取得参数的方法这是jsf中的代码 <h:commandLink action="#{}"> ...

vue中嵌入原生iframe并传递参数

父传子

子传父

vue中嵌入原生iframe并传递参数相关推荐

最新文章

热门文章