Power BI布局报告嵌入在Safari中无法渲染问题求助

问题核心信息 #

• 使用库版本：powerbi-client v2.19.1、powerbi-report-authoring v1.1.1
• 异常现象：Chrome中布局报告渲染正常；Safari中report.layoutReport.on("loaded")代码执行正常，但report.layoutReport.render()无响应，触发on.error抛出isTrusted: false错误；普通Power BI报告通过powerbi.embed()嵌入在Safari中可正常运行，仅布局报告的powerbi.load()方式失效。

排查与解决步骤 #

1. 调整布局报告初始化方式 #

Safari对DOM操作的信任机制更为严格，避免直接赋值report.layoutReport，改用链式初始化逻辑：

// 替换原赋值写法
const layoutReport = powerbi.load(reportContainerpin, config);
layoutReport.on("loaded", () => {
  // 借助微任务确保DOM状态稳定后执行渲染
  setTimeout(() => {
    layoutReport.render().catch(err => console.error("渲染失败:", err));
  }, 0);
});

2. 绑定用户交互触发初始化 #

isTrusted: false错误通常源于未通过用户交互触发高权限脚本操作，Safari要求此类操作需绑定到用户主动事件（如点击、触摸）：

// 绑定到按钮点击事件触发布局报告初始化
document.getElementById("init-layout-report").addEventListener("click", () => {
  const layoutReport = powerbi.load(reportContainerpin, config);
  layoutReport.on("loaded", () => layoutReport.render());
  layoutReport.on("error", err => console.error("布局报告错误:", err));
});

3. 检查Safari浏览器设置 #

• 关闭阻止跨站跟踪选项，该设置会干扰Power BI嵌入脚本的跨域交互
• 确认未开启禁用JavaScript，并检查嵌入容器的iframe是否被内容拦截策略限制

4. 适配库版本组合 #

尝试升级到对Safari兼容性更完善的版本组合：

• 切换为powerbi-client v3.x + powerbi-report-authoring v2.x版本，新版本针对Safari的DOM操作限制做了针对性修复

5. 调试辅助手段 #

• 在Safari开发者工具中开启Show CORS errors，排查是否存在隐藏的跨域请求失败
• 调用layoutReport.getStatus()检查加载状态，确认loaded事件触发时报告是否处于可渲染状态

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