前言
FUXA 是一款轻量、开源、基于 Web 的现代化工业组态 / HMI/SCADA 软件，支持 MQTT、Modbus、OPC UA 等多种工业协议，可快速搭建设备监控、数据可视化、大屏组态页面。
在实际项目集成中，我们经常需要将 FUXA 页面嵌入到自有平台或第三方系统，并隐藏原生菜单、实现更友好的交互操作。本文基于真实开发场景，把最常用的配置、代码和问题解决方案整理成文，方便大家直接复用。
一、FUXA 嵌入第三方系统，隐藏菜单与导航栏
FUXA 默认会显示顶部导航、侧边栏和底部切换按钮，嵌入 iframe 时会显得杂乱。我们可以通过两种方式实现纯净画布模式。
1.1 URL 参数方式（推荐，一行生效）
在访问视图的 URL 后增加参数：
embedded=true完整示例：
http://192.168.1.100:1881/home?view=你的视图ID&embedded=trueembedded=true：自动隐藏所有菜单、导航、切换按钮view=视图ID：直接打开指定组态画面- 适合 iframe 嵌入，无多余元素
1.2 iframe 嵌入代码示例
<iframe
src="http://192.168.1.100:1881/home?view=xxx&embedded=true"
width="100%"
height="850px"
frameborder="0"
></iframe>1.3 全局配置永久隐藏菜单
- 进入 FUXA 编辑页面
- 打开
Settings → Layout - 关闭以下选项：
Show NavigationShow Button
- 保存并重启 FUXA
二、嵌入后实现画布：鼠标缩放 + 按住拖动
隐藏菜单后，FUXA 自带的缩放平移控件不可用。通过外层容器 + JavaScript 可实现流畅的缩放与拖动，不影响内部按钮点击。
完整可直接使用代码
<div id="dragContainer" style="
width: 100%;
height: 900px;
overflow: hidden;
position: relative;
background: #0b1220;">
<iframe id="fuxaFrame"
src="http://192.168.1.100:1881/home?view=xxx&embedded=true"
width="100%" height="100%" frameborder="0"
style="position:absolute; left:0; top:0; transform-origin:center center; cursor:grab;">
</iframe>
</div>
<script>
let scale = 1;
let scaleStep = 0.1;
let posX = 0, posY = 0;
let isDragging = false;
let startX, startY;
const container = document.getElementById('dragContainer');
const iframe = document.getElementById('fuxaFrame');
// 滚轮缩放
container.addEventListener('wheel', (e) => {
e.preventDefault();
scale += e.deltaY > 0 ? -scaleStep : scaleStep;
scale = Math.max(0.5, Math.min(scale, 3));
updateTransform();
});
// 鼠标拖动
container.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX - posX;
startY = e.clientY - posY;
iframe.style.cursor = 'grabbing';
});
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
posX = e.clientX - startX;
posY = e.clientY - startY;
updateTransform();
});
window.addEventListener('mouseup', () => {
isDragging = false;
iframe.style.cursor = 'grab';
});
function updateTransform() {
iframe.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
}
</script>实现效果
- 鼠标滚轮：画布放大 / 缩小（0.5~3 倍限制）
- 鼠标按住拖动：画布自由平移
- 兼容第三方系统、大屏展示、组态面板
三、隐藏菜单后，如何找回 FUXA 编辑页面？
隐藏菜单后，界面上没有任何可进入编辑模式的入口，很多人会误以为配置丢失。
3.1 最快捷方法：直接访问编辑器路径
FUXA 编辑页面有固定路由，直接在浏览器访问：
http://你的FUXA_IP:1881/editor无需任何菜单按钮，一键进入编辑界面。
3.2 恢复菜单按钮（永久解决）
- 通过
/editor进入编辑页 - 进入
Settings → Layout - 重新开启：
Show ButtonShow Navigation
- 保存设置，底部快捷切换按钮即可恢复
3.3 从视图页手动跳转
打开任意视图页面，将地址栏中的 /home 改为 /editor 即可进入编辑模式。
四、项目实用小技巧
-
视图 ID 获取 打开视图后，浏览器地址栏
view=后面的字符串即为视图 ID。 -
跨域问题处理若 iframe 被拦截，需在 FUXA 服务端开启 CORS 跨域配置。
-
权限设置视图可配置匿名访问、只读权限，适合大屏展示、客户演示。
-
MQTT 无缝接入FUXA 内置 MQTT 客户端，可直接连接 EMQX、Mosquitto 等 Broker，接入物联网设备极其方便。
-
部署方式支持 Node 直接运行、Docker 部署，轻量高效，低配服务器也能流畅运行。
五、总结
FUXA 作为开源轻量组态软件，在工业监控、物联网大屏、嵌入式可视化场景中优势非常明显：
- 嵌入第三方系统使用
embedded=true即可实现无菜单纯净展示 - 通过简单 JS 即可实现画布缩放、拖动，提升大屏交互体验
- 隐藏菜单后通过
/editor路径可快速找回编辑页面 - 协议丰富、配置简单，非常适合二次开发与系统集成