问题描述

第三方使用Iframe嵌入Quick BI仪表板时,由于浏览器本身跨域安全限制,无法获取Iframe中仪表板的高度,会导致仪表板出现滚动条的现象。

解决方案

Quick BI在加载仪表板时,会将当前仪表板的高度通过postMessage的方式传到外部页面。外部页面可通过事件监听的方式获取仪表板的高度和ID。

您可以通过两种方式操作:
  • 主动传递Iframe内容高度给外部页面。
    // Quick BI地址,如使用其他地址可自行补充
    const quickBIURL = ['https://das.base.shuju.aliyun.com', 'https://bi.aliyun.com'];
    
    function messageListener(event) {
      if (quickBIURL.includes(event.origin)) {
        // 使用postMessage传出的高度
        console.log('Quick BI Dashboard Height:', event.data.height);
        // 使用postMessage传出的仪表板页面ID
        console.log('Quick BI Dashboard Id:', event.data.pageId);
      }
    }
    
    // 在仪表板加载之前进行监听
    window.addEventListener('message', messageListener);
  • 外部页面主动通过postMessage到Iframe页面获取仪表板高度。
    其中:
    • Iframe为嵌入Quick BI仪表板的Iframe。
    • message传入的data中必须包含{ getDashboardHeight: true }
    代码块示例如下。
    // Quick BI地址,如使用其他地址可自行补充
    const quickBIURL = ['https://das.base.shuju.aliyun.com', 'https://bi.aliyun.com'];
    
    function messageListener(event) {
      if (quickBIURL.includes(event.origin)) {
        // 使用postMessage传出的高度
        console.log('Quick BI Dashboard Height:', event.data.height);
        // 使用postMessage传出的仪表板页面ID
        console.log('Quick BI Dashboard Id:', event.data.pageId);
      }
    }
    
    // 在仪表板加载之前进行监听
    window.addEventListener('message', messageListener);
    
    // 主动请求Quick BI仪表板高度
    // 嵌入Quick BI仪表板的Iframe
    const iframe = document.querySelector('iframe');
    // message传入的data中必须包含{ getDashboardHeight: true }
    iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');
说明 Quick BI仪表板的宽度会随外层容器自适应,因此不会出现纵向滚动条,不需要适配宽度。

完整示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    </head>
    <body>
        <iframe 
        class="quickbi-iframe-demo" 
      //<page_Id>为仪表板页面的ID,access_Token为访问仪表板的准入令牌
      src="https://das.base.shuju.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=<page_Id>&accessToken=<access_Token>
      scrolling="no" 
      frameborder="0" 
      width="100%" 
      height="600">
    </iframe>

        <script>
      // Quick BI地址,如使用其他地址可自行补充
      const quickBIURL = ['https://das.base.shuju.aliyun.com', 'https://bi.aliyun.com'];

      function messageListener(event) {
        if (quickBIURL.includes(event.origin)) {
          // 使用postMessage传出的高度
          console.log('Quick BI Dashboard Height:', event.data.height);
          // 使用postMessage传出的仪表板页面ID
          console.log('Quick BI Dashboard Id:', event.data.pageId);
        }
      }

      // 在仪表板加载之前进行监听
      window.addEventListener('message', messageListener);

      // 嵌入Quick BI仪表板的Iframe
      const iframe = document.querySelector('iframe');
      
       // 主动请求Quick BI仪表板高度
      // message传入的data中必须包含{ getDashboardHeight: true }
      iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');

        </script>
    </body>
</html>