告别白屏！解决Vue2+iView2嵌套Iframe关闭时显示不出的问题

前端

2023-02-15 21:13:07

Vue2+iView2嵌套Iframe白屏问题终极解决指南

白屏问题概述

在Vue2+iView2项目中，使用tabs组件嵌套iframe时，关闭一个tabpane会导致下一个tabpane内嵌套的iframe显示不出来，出现白屏的情况。这是由于同源策略限制所致。

解决方案

使用Proxy代理

配置服务器端proxy代理，将iframe的请求重定向到本地服务器，规避同源策略限制。

使用iframe sandbox属性

在iframe中添加sandbox属性，限制iframe行为，允许加载来自不同域的资源。

代码示例

Proxy代理方法：

// 服务器端配置
app.use(proxy('/api', {
  target: 'https://example.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}));

// Vue组件中使用proxy代理
<template>
  <i-tabs>
    <i-tab-pane label="Tab 1">
      <iframe src="/api/iframe1.html"></iframe>
    </i-tab-pane>
    <i-tab-pane label="Tab 2">
      <iframe src="/api/iframe2.html"></iframe>
    </i-tab-pane>
  </i-tabs>
</template>

sandbox属性方法：

<template>
  <i-tabs>
    <i-tab-pane label="Tab 1">
      <iframe src="https://example.com/iframe1.html" sandbox="allow-same-origin allow-scripts"></iframe>
    </i-tab-pane>
    <i-tab-pane label="Tab 2">
      <iframe src="https://example.com/iframe2.html" sandbox="allow-same-origin allow-scripts"></iframe>
    </i-tab-pane>
  </i-tabs>
</template>