Node-RED Template节点嵌入网站部件切换标签后无法自动加载如何解决

安全阿岳

2026-10-3

问题原因

该问题是Node-RED Dashboard的标签渲染机制和天气组件的初始化逻辑冲突导致的：

Node-RED Dashboard切换标签时会卸载隐藏标签的DOM元素，切回时重新渲染对应DOM
weatherwidget.io的脚本仅在首次加载时全局扫描一次对应类名的元素完成初始化，后续新增的同类型元素不会被自动识别，你之前尝试重新插入代码不生效是因为脚本会检测到自身已加载，不会重复执行初始化逻辑

解决方案

直接修改你原有的Weather ui_template节点的代码即可，无需额外的inject、ui_control节点：

<a class="weatherwidget-io" href="https://forecast7.com/en/n37d81144d96/melbourne/" data-font="Verdana" data-icons="Climacons Animated" data-theme="original" data-basecolor="#282828" data-accent="#282828" data-highcolor="#ffffff" data-lowcolor="#ffffff" data-cloudfill="#282828" data-raincolor="#0871b8" data-snowcolor="#ffffff">Melbourne VIC, Australia</a>
<script>
// 首次加载时初始化widget脚本
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');

// 监听当前组件可见性变化，切回标签时手动刷新widget
(function(scope) {
    scope.$watch('$visible', function(isVisible) {
        if (isVisible && window.weatherwidgetIO) {
            // 调用官方提供的重载方法，重新扫描当前页面的widget元素
            weatherwidgetIO.reload();
        }
    });
})(scope);
</script>