自定义components-reconnect-modal实现Blazor自动重连问题求助

核心思路 #

自定义components-reconnect-modal后，不能再依赖默认的内部DOM结构（比如原有的h5 a），要基于你自己定义的DOM节点来编写选择器，同时确保MutationObserver在页面加载阶段就完成初始化，监听目标容器的状态变化。

具体实现示例 #

1. 自定义重连提示的Razor组件（示例结构） #

假设你自定义的重连提示DOM结构如下：

<div id="custom-reconnect-modal" class="blazor-reconnect-modal">
    <div class="modal-box">
        <span class="reconnect-text">连接已断开，正在尝试重连...</span>
    </div>
</div>

2. JavaScript 监测代码（适配自定义结构） #

将这段代码放在_Host.cshtml的body末尾（或通过JS隔离文件引入）：

document.addEventListener('DOMContentLoaded', function() {
    // 精准定位自定义的重连容器
    const reconnectModal = document.getElementById('custom-reconnect-modal');
    if (!reconnectModal) return;

    // 配置Observer：监听元素的样式或类名变化（对应重连提示的显示/隐藏逻辑）
    const observerConfig = { 
        attributes: true, 
        attributeFilter: ['style', 'class'] 
    };

    const onModalChange = function(mutations) {
        for (let mutation of mutations) {
            // 根据你自定义的显示规则判断组件是否可见
            const isModalVisible = window.getComputedStyle(reconnectModal).display !== 'none';
            if (isModalVisible) {
                // 延迟8秒后自动刷新页面（可根据需求调整时长）
                setTimeout(() => {
                    window.location.reload();
                }, 8000);
                // 触发后断开Observer，避免重复执行刷新逻辑
                observer.disconnect();
                break;
            }
        }
    };

    const observer = new MutationObserver(onModalChange);
    observer.observe(reconnectModal, observerConfig);
});

3. 关键注意事项 #

• 选择器可靠性：优先使用唯一ID（如custom-reconnect-modal）定位元素，比层级选择器更稳定，避免因DOM结构微调导致选择失效。
• 初始化时机：必须在DOMContentLoaded事件中初始化Observer，确保目标元素已经渲染完成。
• 调试验证：如果仍未触发刷新，可以在onModalChange函数中添加console.log(mutations)，查看实际监测到的DOM变化，调整可见性判断逻辑。

内容的提问来源于stack exchange，提问作者Mike T. Angelo