Electron：如何在Webview页面显示前移除样式并阻止<style>标签加载？

你遇到的样式闪屏问题确实很典型——DOMContentLoaded触发时页面已经开始渲染，所以会有短暂的样式显示窗口。下面给你几个更彻底的方案，从源头阻止样式生效：

方案一：通过Session拦截CSS资源请求（最彻底） #

在主进程里，针对WebView对应的会话拦截所有CSS相关请求，让样式文件根本不会被加载。这样页面从一开始就没有样式，完全避免闪屏。

代码示例（主进程）：

const { session } = require('electron');

// 若WebView使用默认会话，直接用session.defaultSession即可；若用自定义分区，替换成对应会话
const webViewSession = session.fromPartition('your-webview-partition');

// 拦截所有CSS资源请求
webViewSession.webRequest.onBeforeRequest(
  { urls: ['*://*.css', '*://*/*.css', '*://*/*?*css*'] },
  (details, callback) => {
    callback({ cancel: true });
  }
);

这个方法从网络请求层面直接阻断样式加载，不管是远程还是本地CSS文件，都可以通过调整urls规则精准拦截，彻底杜绝样式渲染的可能。

方案二：Preload脚本在文档最早期介入 #

Preload脚本会在页面DOM加载前注入，我们可以利用这个时机，在文档还没开始渲染时就禁用所有样式，甚至监听并阻止后续样式节点的添加。

代码示例（preload脚本文件）：

// 监听文档加载的最早期阶段，用捕获模式确保优先执行
document.addEventListener('DOMContentLoaded', () => {
  // 立即移除所有已存在的样式节点
  document.querySelectorAll('link[rel="stylesheet"], style').forEach(elem => {
    elem.disabled = true;
    elem.remove();
  });
}, true);

// 监听后续新增的样式节点，实时移除
if (document.readyState === 'loading') {
  const styleObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (
          (node.tagName === 'LINK' && node.rel === 'stylesheet') || 
          node.tagName === 'STYLE'
        ) {
          node.disabled = true;
          node.remove();
        }
      });
    });
  });

  styleObserver.observe(document.head, { childList: true, subtree: true });
}

将这个脚本通过WebView的preload属性注入：

<webview src="your-target-url" preload="./preload-disable-styles.js"></webview>

Preload脚本的执行时机远早于页面自身的渲染逻辑，能在样式生效前就完成清理，基本不会出现闪屏。

方案三：直接修改页面源码（仅适用于本地页面） #

如果WebView加载的是你可控的本地HTML文件，可以直接编辑源码，移除所有<link rel="stylesheet">和<style>节点后再加载。但这个方法对远程页面无效，灵活性较低。

对比下来，方案一适合远程页面场景，拦截请求的方式最彻底；方案二适合需要保留部分样式或无法拦截请求的场景，能精准控制样式的生效时机。

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