Electron中WebView内图片与视频链接无法打开问题求助

1. 拦截新窗口请求 #

很多网站的视频、图片链接并非通过传统<a>标签跳转，而是由JavaScript触发新窗口打开逻辑。可以监听WebView的new-window事件来处理这类请求：

// 渲染进程中获取WebView元素
const webview = document.querySelector('webview');

webview.addEventListener('new-window', (event) => {
  // 选项1：在当前WebView内加载目标链接
  webview.loadURL(event.url);
  // 选项2：调用系统默认浏览器打开（适合外部跳转场景）
  // require('electron').shell.openExternal(event.url);
  event.preventDefault();
});

2. 注入脚本拦截自定义点击事件 #

如果网站的链接逻辑绑定在非<a>元素（比如div、图片容器）上，可通过preload脚本注入页面，手动拦截点击并解析目标链接：
首先配置WebView的preload属性：

<webview 
  src="http://www.varzesh3.com" 
  webpreferences="contextIsolation=true, preload=./preload.js"
></webview>

编写preload.js：

// preload.js
const { ipcRenderer } = require('electron');

document.addEventListener('click', (e) => {
  let target = e.target;
  // 向上遍历找到携带跳转地址的元素
  while (target && !target.href && !target.dataset.href) {
    target = target.parentElement;
  }
  
  const targetUrl = target.href || target.dataset.href;
  if (targetUrl) {
    e.preventDefault();
    // 将地址发送到渲染进程处理
    ipcRenderer.send('load-target-url', targetUrl);
  }
});

渲染进程中接收并处理：

// 渲染进程
const { ipcRenderer } = require('electron');
const webview = document.querySelector('webview');

ipcRenderer.on('load-target-url', (_, url) => {
  webview.loadURL(url);
});

3. 调整WebView环境配置 #

部分网站会识别非标准浏览器环境并限制功能，可通过以下配置模拟普通浏览器：

• 设置匹配Chrome的User-Agent：

<webview 
  src="http://www.varzesh3.com" 
  useragent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"
></webview>

• 开启必要的WebPreferences保证脚本运行：

<webview 
  src="http://www.varzesh3.com" 
  webpreferences="nodeIntegration=false, contextIsolation=true"
></webview>

4. 临时调整CSP限制（测试用） #

如果网站的内容安全策略（CSP）阻止了WebView内的跳转，可临时修改请求头放宽限制（生产环境需谨慎使用）：

<webview 
  src="http://www.varzesh3.com" 
  headers='{"Content-Security-Policy": "default-src *; script-src * 'unsafe-inline' 'unsafe-eval'; style-src * 'unsafe-inline'"}'
></webview>

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