反應+ 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

指示預加載是 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 ）。

您可以找到有關 webview 的Electron 預加載腳本不起作用的更多信息？

Answer 2

我已經能夠預加載 js，但沒有使用 preload 屬性。 相反，我從主進程注入它：

app.on('web-contents-created', (_event, contents) => {
  contents.on('will-attach-webview', (_wawevent, webPreferences, _params) => {
    webPreferences.preloadURL = `file://${__dirname}/webview-preload.js`;
  });
});

在渲染器中使用 React。