vue嵌套iframe踩坑

发布时间 2023-05-16 17:32:59作者: 葱花粉丝

iframe修改src不触发刷新

在vue中通过v-bind绑定src

<iframe
      sandbox="allow-same-origin allow-scripts allow-forms"
      ref="iframe_page"
      :src="pageSrc"
      style="display:block"
      width="100%" height="858px"></iframe>

当src为已经加载过的路径时,iframe里的内容就不会刷新
通过在src后面追加时间戳来解决

let iframeTimestamp = new Date().getTime() // 添加时间戳,防止iframe缓存导致的不刷新问题
this.pageSrc = `${data.openUrl}&iframeTimestamp=${iframeTimestamp}`

使用postMessage通信

  • 在iframe向父页面传值时,还是出现了跨域问题
    发现跨域是因为在子页面里使用了top.location作为判断条件,浏览器似乎不允许使用top.location,避免使用top.location就可以解决跨域问题了