解决iframe跨域问题

场景

在开发中,发现部分页面内容在不同项目中重复率极高,像导航栏这种,不同项目都需要复制一份代码在项目中很麻烦,而且修改起来也工具量大,容易遗漏或错误。想到通过引用组件或iframe页面嵌套的方式解决,使用组件解决的话每次更新也需要重新引入组件,所以采用iframe页面嵌套。
首先在主项目(子框架)中设置导航栏,在子项目(父框架)中使用iframe引入:

<iframe
            id="iframe"
            ref="iframe"
            frameborder="0"
            scrolling="no"
            class="frame"
            onmouseover="this.style['z-index']='10000';this.style.height='100%'"
            onmouseout="this.style['z-index']='100';this.style.height='65px"
            :src="'#'"
            :style="{ 'background-color':'transparent', position: 'absolute', width: '100%',top: 0,height: '65px',left:0,'z-index':100 }"
    >
    </iframe>

这样其它项目使用时直接复制这行代码就行。但是,由于导航栏有划过显示子导航,而子导航内容不确定,如果设定划过iframe的height为固定值时,onmouseout只会在划出固定高度内容后才会触发。对于子导航远小于这个高度时,在子框架里已经认为划出子导航隐藏子导航内容,而在父框架里仍没有触发onmouseout。所以需要在公用的子框架中检测划出来改变iframe高度。
在子框架中使用window.parent.document.getElementById(‘iframe’).style来设置时,会报跨域问题:
在这里插入图片描述

解决跨域一:使用代理页面(来自 伯纳乌的追风少年)

文章链接: https://www.jianshu.com/p/9d90d3333215

解决2:使用postmessage

在子框架写入:

window.parent.postMessage({ height: '65px', 'z-index': '100' }, '*')

父框架写入:

window.addEventListener('message', (event) => {
          const op = event.data
          if (op.height) {
              this.$refs.iframe.style.height = op.height
              this.$refs.iframe.style['z-index'] = op['z-index']
          }
      })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值