iframe网页内嵌集成

背景

观远BI平台支持仪表板以iframe内嵌集成的方式嵌入到第三方系统内。iframe内嵌集成需要关注的点包括：

• SSO单点登录 (请参考观远BI - SSO集成)

• 仪表板上多余内容（例如logo栏、仪表板目录、页面标题等）隐藏

• 通过URL传递页面查询参数（请参考页面URL添加条件参数）

一. PC 端页面多余内容隐藏

• BI系统内原生的页面带有Logo栏、仪表板导航栏等信息，这些内容在将页面集成到第三方系统后往往是需要隐藏掉的。观远提供了一些特定的URL查询参数，可以把这些多余的信息隐藏掉。

技术手段：iframe 内嵌；URL 中增加 Query String （查询字符串）

PC 端页面常用参数：

• ?ps=iframe    仪表板页面隐藏logo栏、仪表板目录

• ?ps=iframe2  仪表板页面隐藏logo栏、仪表板目录和页面标题栏

• ?ps=iframe3 仪表板页面隐藏logo栏

• ?viewMode=readonly  隐藏页面和卡片编辑操作，使用户权限暂时变为只读

• ?ps=embed    卡片详情页隐藏除可视化图表之外的其他所有内容

URL格式示例：https://app.guandata.com/page/b81ee1f66f3934de1ba5e447?ps=iframe  

当ps参数不为embed时，嵌入卡片是最小宽度为500像素。 

---

二. 移动端页面集成：

1. PC端访问页面显示移动端效果

场景：观远页面集成至企业微信、钉钉微应用或者自研小程序后，用户有可能会在PC端访问。只想让用户浏览移动端视图（不允许进入PC端进行编辑）的话，此时提供移动端集成页面时需要注意提供移动端的URL。

移动端的URL格式为：$homeURL/m/page/{pageid}

URL格式示例：https://demo.guandata.com/m/page/p5c0e900bbe3746449bca688

2. 隐藏页面上方页头及底部收藏标志(仪表板入口)

场景：将移动端页面集成至企业微信、钉钉微应用或者自研小程序，只展示页面内容，需要隐藏页头（仪表板入口）把用户限定在页面内不要访问观远其他页面。

参数：?pref.HostNavOnly=true

注意事项：

1.问：已有URL里已经包含了 query string 怎么处理？（示例）

答：通过 & 符号来连接所有的参数。举个例子：  http://newbi.com?provider=abc&ssotoken=xxxx&key1=ssss  

2.问：能否隐藏页面标题栏（使用参数?ps=iframe2 ），但是保留筛选栏呢？

答：默认不支持单独处理，建议把筛选栏上的筛选器都移到页面上。5.4.0及之后的版本可以引入新的配置项，需要同时配置 app_header、page_header_titleBar、page_title 这三个参数，如有疑问可联系观远技术支持。