如何从前端按需禁用ASP.NET Core的热重载脚本？

针对你需要临时禁用单页面热重载、同时保留全局热重载功能的需求，以下是几个可行的前端脚本方案：

方案一：替换热重载核心刷新函数 #

ASP.NET Core的热重载脚本会在全局暴露window.__aspNetCoreBrowserRefresh对象，其中的reload方法是触发页面刷新的核心逻辑。我们可以通过替换这个方法，实现开关式的临时禁用：

// 创建控制按钮并添加到页面
const toggleBtn = document.createElement('button');
toggleBtn.textContent = '禁用热重载';
toggleBtn.style.cssText = `
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  padding: 8px 12px;
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;
document.body.appendChild(toggleBtn);

// 保存原始刷新函数
const originalReload = window.__aspNetCoreBrowserRefresh?.reload;
let isDisabled = false;

toggleBtn.addEventListener('click', () => {
  isDisabled = !isDisabled;
  toggleBtn.textContent = isDisabled ? '启用热重载' : '禁用热重载';
  toggleBtn.style.background = isDisabled ? '#4CAF50' : '#ff4444';

  if (isDisabled) {
    // 替换为无操作函数，拦截刷新
    window.__aspNetCoreBrowserRefresh.reload = () => {
      console.log('当前页面热重载已临时禁用');
    };
  } else {
    // 恢复原始刷新逻辑
    window.__aspNetCoreBrowserRefresh.reload = originalReload;
  }
});

这个方案的优势是仅拦截刷新动作，WebSocket连接会保持正常，重新启用后能立即恢复热重载功能。

方案二：拦截WebSocket刷新消息 #

热重载通过WebSocket接收来自服务器的刷新指令（通常消息内容为refresh），我们可以重写WebSocket的onmessage方法，过滤掉刷新指令：

const originalOnMessage = window.__aspNetCoreBrowserRefreshWebSocket?.onmessage;
let isDisabled = false;

// 创建控制按钮
const toggleBtn = document.createElement('button');
toggleBtn.textContent = '禁用热重载';
toggleBtn.style.cssText = `
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  padding: 8px 12px;
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;
document.body.appendChild(toggleBtn);

toggleBtn.addEventListener('click', () => {
  isDisabled = !isDisabled;
  toggleBtn.textContent = isDisabled ? '启用热重载' : '禁用热重载';
  toggleBtn.style.background = isDisabled ? '#4CAF50' : '#ff4444';

  // 重写消息处理逻辑
  window.__aspNetCoreBrowserRefreshWebSocket.onmessage = function(event) {
    if (isDisabled && event.data === 'refresh') {
      console.log('已拦截热重载刷新指令');
      return;
    }
    // 非禁用状态或非刷新消息，执行原始逻辑
    originalOnMessage.call(this, event);
  };
});

此方案更贴近热重载的底层逻辑，适合需要精细控制消息处理的场景。

方案三：断开WebSocket并阻止重连 #

如果需要完全暂停当前页面的热重载通信，可以直接关闭WebSocket连接，并通过猴子补丁捕获并清除重连定时器：

const originalSetTimeout = window.setTimeout;
let reconnectTimeoutId = null;

// 捕获热重载的重连定时器
window.setTimeout = function(callback, delay) {
  if (typeof callback === 'function' && callback.toString().includes('reconnectWebSocket')) {
    reconnectTimeoutId = originalSetTimeout(callback, delay);
    return reconnectTimeoutId;
  }
  return originalSetTimeout.apply(this, arguments);
};

// 创建控制按钮
const controlBtn = document.createElement('button');
controlBtn.textContent = '禁用热重载（断开连接）';
controlBtn.style.cssText = `
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  padding: 8px 12px;
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
`;
document.body.appendChild(controlBtn);

controlBtn.addEventListener('click', () => {
  // 关闭WebSocket连接
  window.__aspNetCoreBrowserRefreshWebSocket?.close();
  // 清除重连定时器
  if (reconnectTimeoutId) {
    clearTimeout(reconnectTimeoutId);
    console.log('已断开热重载连接并阻止重连');
    controlBtn.textContent = '热重载已禁用';
    controlBtn.disabled = true;
  }
});

注意：这个方案会完全断开当前页面的热重载连接，需要刷新页面才能恢复热重载功能，适合长时间不需要刷新的场景。

内容的提问来源于stack exchange，提问作者lonix