React + Electron webview标签预加载js不起作用

Question

当我使用 webview 标签时，预加载 js 不起作用

我的代码如下：

// test.js
<div>
    <webview id="foo" src="https://www.github.com/" preload="file://preload.js"/>
</div>

我的 preload.js 文件：

// preload.js
alert('preload success')

我也试过这个：

// test.js
<div>
    <webview id="foo" src="https://www.github.com/" preload={`file://${__dirname}/preload.js`}/>
</div>

我什至截获了 main.js 中的文件协议

// main.js
app.on('ready', () => {
  protocol.interceptFileProtocol('file', (request, callback) => {
    console.log('success')
    const url = request.url.substr(7);
    callback({path: path.normalize(`${__dirname}/${url}`)});
  }, (error) => {
    if (error) console.error('Failed to intercept protocol');
  });
})
;

但是这些尝试都没有奏效。控制台中没有“成功”，也没有“成功”警报。但是如果我使用这样的绝对路径：

// test.js
<div>
    <webview id="foo" src="https://www.github.com/" preload="file:///home/ppp/electron-dict/src/components/preload.js"/>
</div>

代码运行良好，我的应用程序提示“成功”。这是为什么呢？

我的项目路径：

├── public
│   ├── index.html
│   ├── main.js
├── src
│   ├── App.js
│   ├── components
│   │   ├── test.js
│   │   ├── preload.js
│   └── index.js

Electron 和 React 版本：

├─ electron@7.1.1
├─ react@16.11.0

Answer 1

表明 preload 是 webview 标签的顶级属性，不在 webpreferences 内

<webview src="https://www.github.com/" preload="./test.js"></webview>

一个字符串，它指定将在访客页面中运行其他脚本之前加载的脚本。脚本 URL 的协议必须是file: 或asar:，因为它会在后台由require 加载。

当访客页面没有节点集成时，此脚本仍然可以访问所有 Node API，但 Node 注入的全局对象将在此脚本执行完成后被删除。

注意：此选项将在为will-attach-webview 事件指定的webPreferences 中显示为preloadURL（而不是preload）。

您可以在Electron preload script for webview not working?找到更多信息