解决iframe跨域问题

最新推荐文章于 2024-08-11 18:46:19 发布

故事佛小妞

最新推荐文章于 2024-08-11 18:46:19 发布

阅读量2.4w

点赞数 1

分类专栏： web前端文章标签： iframe跨域

本文链接：https://blog.csdn.net/guishifoxin/article/details/90236085

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

场景

在开发中，发现部分页面内容在不同项目中重复率极高，像导航栏这种，不同项目都需要复制一份代码在项目中很麻烦，而且修改起来也工具量大，容易遗漏或错误。想到通过引用组件或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']
          }
      })