如何用App Insights获取嵌入PowerBI的指标？IFrame指标收集与JS注入方法

一、能否收集IFrame中的指标？ #

直接跨域访问PowerBI生成的IFrame内部性能数据是行不通的——这是浏览器同源策略的限制，因为PowerBI报表的域名和你的主页面域名几乎肯定不一样，浏览器会阻止任何跨域的DOM或性能数据访问。

不过别担心，PowerBI Embedded本身提供了官方的事件监听机制，可以帮你获取报表渲染的时序数据，完全不需要碰IFrame内部：

• 使用PowerBI JavaScript嵌入库，你可以监听loaded、rendered、visualRendered等核心事件，这些事件会在报表加载的关键节点触发，你可以记录每个事件的时间戳，从而构建完整的渲染时序。
• 举个简单的例子，初始化嵌入报表后，添加事件监听：

  report.on("loaded", function () {
    console.log("报表框架加载完成时间:", new Date().toISOString());
  });
  
  report.on("rendered", function () {
    console.log("报表内容渲染完成时间:", new Date().toISOString());
  });
  

• 另外，如果你需要更细致的性能数据，还可以结合主页面的performance API，对比主页面加载和报表事件触发的时间差，来评估整体加载性能。

二、能否向PowerBI报表中注入JavaScript？ #

很遗憾，官方不支持也不允许向PowerBI报表中注入自定义JS。原因有两个：

1. 安全层面：PowerBI的内容由微软托管，注入外部JS会带来潜在的安全风险，违反PowerBI的服务条款。
2. 稳定性层面：PowerBI的前端实现会定期更新，强行注入的JS很容易因为版本更新而失效，甚至导致报表加载异常。

如果你有特定的交互需求，优先考虑使用PowerBI Embedded提供的自定义视觉对象、报表级别的交互配置，或者通过嵌入API与报表进行数据交互，这些都是官方支持的合法方式。

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