Thingsboard仪表板嵌入iframe实现全屏显示的解决方案

背景介绍

在Thingsboard物联网平台中，仪表板嵌入是一个常见的需求场景。用户经常需要将一个仪表板通过iframe方式嵌入到另一个仪表板中展示，但默认情况下会显示左侧边栏和工具栏，影响视觉效果和用户体验。

问题分析

通过分析用户反馈，我们发现当使用/dashboards/路径嵌入仪表板时，系统会默认显示左侧导航栏。这是Thingsboard的标准界面布局，但在某些全屏展示场景下，这些额外元素会干扰主要内容的展示。

解决方案

1. 修改嵌入路径

核心解决方案是修改iframe的src路径，将/dashboards/改为/dashboard/（注意单复数形式）。这种路径差异对应着Thingsboard不同的界面渲染模式：

• /dashboards/路径：显示完整界面，包括左侧边栏
• /dashboard/路径：仅显示仪表板内容，隐藏左侧边栏

示例代码：

<iframe src='https://your-domain.com/dashboard/your-dashboard-id'></iframe>

2. 控制工具栏显示

工具栏的显示由被嵌入仪表板的设置控制。要实现全屏效果，需要在被嵌入的仪表板设置中：

1. 进入仪表板设置
2. 找到"Hide toolbar"选项
3. 启用该选项以隐藏工具栏

3. 状态参数传递

对于需要传递状态参数的场景，可以使用以下方法：

const stateObject = {
  id: "default",
  params: {
    // 自定义参数
  }
};
const state = btoa(JSON.stringify(stateObject));
const url = `/dashboard/${dashboardId}?state=${encodeURIComponent(state)}`;

高级技巧

自定义编码函数

当需要将对象编码为Base64时，可以自定义实现编码函数：

function objToBase64URI(obj) {
  return btoa(unescape(encodeURIComponent(JSON.stringify(obj))));
}

动态嵌入实现

在Thingsboard自定义部件中动态嵌入仪表板的完整示例：

self.onInit = function() {
  updateDashboardFrame();
};

self.onDataUpdated = function() {
  updateDashboardFrame();
};

function updateDashboardFrame() {
  const dashboardId = getDashboardIdBasedOnData();
  const stateParams = prepareStateParams();
  const url = buildDashboardUrl(dashboardId, stateParams);
  
  const iframe = document.createElement('iframe');
  iframe.src = url;
  document.getElementById("container").appendChild(iframe);
}

注意事项

1. 跨域问题：确保嵌入的仪表板与父页面在同一域名下，避免浏览器安全限制
2. 响应式设计：考虑iframe的尺寸适配不同设备屏幕
3. 性能优化：避免过度嵌套，影响页面加载速度

总结

通过合理配置嵌入路径和仪表板设置，可以轻松实现Thingsboard仪表板的全屏嵌入效果。这种技术广泛应用于监控大屏、数据看板等场景，为用户提供更专注的数据可视化体验。开发者还可以结合状态参数传递，实现更复杂的交互逻辑。

对于更高级的需求，建议参考Thingsboard官方文档中关于仪表板嵌入和状态管理的详细说明，以获取最佳实践方案。