iFrame嵌套传参

情况说明：两个Vue项目嵌套（vue父，Vue子）

vue父

// vue父
<iframeref="iframeParms"width="100vw"height="100vh"class="iframe-box":src="就是子项目的路径"frameborder="0"/>

第一步：嵌套完成，开始通信

Vue子

先在Vue子项目的 mounted里面建立一个与Vue父项目的链接
1.考虑到我的Vue父项目加载iframe需要时间，我在子项目中加了300毫秒的延迟
2.像Vue父发送一个信息，告诉他已经连接成功

mounted() {setTimeout(() => {window.parent.postMessage('init', '*') // 向父组件发送一个 init的消息信息}, 300)
}

Vue父

同样也是在mounted里面监听一下子项目传递的消息

  mounted() {window.addEventListener('message', (e) => {const { data } = eif (data === 'init') {//接收到子项目传过来的init信息，就开始进行向子项目的传参操作setTimeout(() => {this.iframeBox = this.$refs.iframeParms.contentWindow // 关键步骤this.iframeBox.postMessage({action: 'params',params: {authToken: this.token.Authorization,name: this.token.sysLoginUserBO.empName,discoverer: this.token.sysLoginUserBO.id}}, '*')}, 1000)}if (data === 'changeShow') {//  可以写你的处理逻辑}if (data === 'changeShow1') {//  可以写你的处理逻辑}})},

父项目向子发消息

this.iframeBox = this.$refs.iframeParms.contentWindow
this.iframeBox.postMessage('cancel', '*')

子项目接收父传过来的参数及信息

  mounted() {window.addEventListener('message', (e) => {const { data } = econsole.log(e, '3333333333333333')if (data.action === 'params') {console.log(data.params)const { authToken, id, name, discoverer } = data.paramssessionStorage.setItem('authToken', authToken)sessionStorage.setItem('insideOrgId', id)this.temp.discovererName = namethis.temp.discoverer = discoverer}if (data === 'cancel') {this.cancel()}if (data === 'submit') {this.save()}})setTimeout(() => {window.parent.postMessage('init', '*')}, 300)}

iFrame嵌套传参相关推荐

vue 与 iframe之间传参
做的一个项目使用到了svg图,使用iframe 导入,并且需要向iframe传递参数,遇到的小问题,在此记录一下. vue使用iframe导入svg页面:  < ...
vue 向 iframe 中传参
iframe页面: window.unit= { addlayer: function (val) { console.log(val) // 这是从vue中获取到的参数 } } vue 页面: ...
c++ vector嵌套传参
失败的: int add_ad(vector<vector<float>> &p1) {vector<float> aa = p1[0];vector< ...
母子页的iframe传参跳转，参数需要编码
背景: 我的项目是一个正常html嵌套了一个iframe, 项目需要传参后,改变iframe的src属性值,实现显示不同的页面说明: 再不传值的时候显示是这样的传值后显示所传值的页面例如页面值是 ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
Vue第二部分(4)：嵌套路由和路由传参
嵌套路由实际生活中的应用界面,通常由多层嵌套的组件组合而成.当我们路由到某一个组件后,还经常需要在该组件中继续路由到其子组件,这就需要使用Vue的嵌套路由.比如:当我们路由到登录组件后,又分为手机验 ...
动态传参, 名称空间, 嵌套, gloabal, nonlocal
一, 动态传参 1. *args 接收到的是元组先用位置参数进行传参, 剩下的位置参数用*args进行传参 2. **kwargs 接收到的是一个字典先用关键字参数进行传参, 剩下的参数用**kw ...
vue——路由之路由跳转、路由传参、路由嵌套、路由模式
相关认识: 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 ...
react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样不好写所以在使用的时候建议使用react-router-config来配置路由会相对轻松第一步先安装路由依赖 yarn add react-rou ...

iFrame嵌套传参

iFrame嵌套传参

vue父

Vue子

Vue父

父项目向子发消息

子项目接收父传过来的参数及信息

iFrame嵌套传参相关推荐

最新文章

热门文章