文章 查看内容

iframe网页内嵌集成

iframe网页内嵌集成

103 0 开放与集成 2024-6-3 11:35 发布者: 观小凡

通过URL传递参数,可实现SSO单点登录、仪表板上多余内容(例如logo栏、仪表板目录、页面标题等)隐藏,和传递页面查询参数。
 

背景

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

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

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

  • 通过URL传递页面查询参数

image.png

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

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

image.png

技术手段: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

image.png

注意事项:

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 这三个参数,如有疑问可联系观远技术支持。



路过

雷人

握手
2

鲜花

鸡蛋

刚表态过的朋友 (2 人)

评论

您需要登录后才可以发表言论 登录立即注册
微信服务号
联系我们
电话:400-880-0750
邮箱:hello@guandata.com
Copyright © 2001-2024 观远社区 版权所有 All Rights Reserved. 浙 ICP 备15006424号-3
去评论 去发文 返回顶部
返回顶部