Vue.js页面嵌入iframe后在Firefox浏览器中无法正常显示问题求助

现有嵌入了Echarts饼图的Vue.js页面，需要通过iframe嵌入到jQuery项目中展示，存在以下异常：

• Chrome、IE浏览器下显示正常
• Firefox 93 64位版本下页面完全空白，仅存在空的app标签，控制台无任何报错
• 将Echarts饼图替换为纯数字基础内容后，Firefox下仍然无法正常显示

按照以下优先级逐步排查修复：

1. 排查iframe属性配置问题 #

Firefox对iframe的渲染规则和Chrome存在差异，优先调整iframe配置：

• 给iframe显式设置width、height属性，不要仅依赖CSS控制尺寸，示例配置如下：

<iframe src="你的Vue页面地址" width="100%" height="600" frameborder="0"></iframe>

• 如果是动态创建插入的iframe，先将iframe元素追加到DOM节点后，再设置src属性，不要先配置src再插入DOM。
• 跨域嵌入的场景下，给iframe添加权限声明属性：

<iframe src="你的Vue页面地址" width="100%" height="600" allow="script-src 'self' 'unsafe-inline'" allowthirdpartycookies="true"></iframe>

2. 排查Vue页面本身的Firefox兼容问题 #

先单独在Firefox中直接访问Vue页面的直连地址，不走iframe嵌入，验证是否能正常打开：

• 调整Vue项目的Babel兼容配置，在@babel/preset-env的targets中添加Firefox 93的适配规则：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "60",
        "ie": "11",
        "firefox": "93"
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

• 调整Vue实例挂载时机，确保DOM完全加载后再挂载：

window.addEventListener('load', () => {
  new Vue({
    // 你的Vue配置
  }).$mount('#app')
})

• 检查打包后的JS文件，确认可选链?.、空值合并??等Firefox 93未完全兼容的语法已经被Babel转译，避免静默执行失败。

3. 排查跨域相关配置 #

Firefox对跨域资源的校验规则更严格：

• 确认Vue页面的响应头没有设置X-Frame-Options: DENY或者CSP frame-ancestors禁止嵌入的规则。
• 如果Vue页面的渲染依赖cookie，给cookie配置SameSite=None; Secure属性，适配Firefox的第三方cookie拦截策略。

内容的提问来源于stack exchange，提问作者LaurenceY