未在 webview iframe 中执行的预加载脚本答案

【问题标题】：Preload scripts not being executed in webview iframes未在 webview iframe 中执行的预加载脚本
【发布时间】：2020-12-29 21:40:13
【问题描述】：

呈现器进程中存在的Webview标签，位于<body>：

<webview src="http://somewebpage.com" preload="somescript.js">

somescript.js在somewebpage中执行，但如果somewebpage中有<iframe>s，则脚本不会在iframe中运行。

我怎样才能让它运行？在 iframe 中的任何其他脚本之前？

我在 github 上发现了这个似乎相关的问题： https://github.com/electron/electron/pull/19260 但这没有任何意义……

我尝试添加 nodeintegrationinsubframes 并将值从 false 更改为 true

<webview src="somewebpage" preload="somescript.js" nodeintegrationinsubframes="false">

但它没有效果:(

【问题讨论】：

标签： javascript node.js iframe webview electron

【解决方案1】：

main.js

mainWindow = new BrowserWindow({
    width: 1024,
    height: 728,
    webPreferences: {
        nodeIntegrationInSubFrames: true,
        webviewTag: true,
        nodeIntegration: true
    }
});

渲染器

<webview
            src="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe"
            preload="./preload.js"
            style='width: 100%; height: 800px'
            nodeIntegrationInSubFrames
        />

preload.js

process.once("loaded", () => {
    alert(window.location);
});

你可以根据window.location指定你要在哪里执行javascript。上面的代码将显示每个子iframe的位置。

这对我很有效。

【讨论】：

你的电子版是什么？
最新稳定版
我使用的是 v9.2.1
它对我不起作用 :( 你看到警报两次了吗？
好吧，在上传答案之前我总是测试自己。

【解决方案2】：

我的项目遇到了同样的问题，将电子更新到最新的 beta 版本为我解决了。

我假设你知道如何做到这一点：

npm install electron@11.0.0-beta.6

您仍然需要考虑使用开发版软件包的稳定性问题。

【讨论】：

【解决方案3】：

通过查看electron's 文档，这可能会有所帮助。

app.js

let win
app.whenReady().then(() => {
  win = new BrowserWindow({
    webPreferences: {
      nodeIntegrationInSubFrames: true,
      webviewTag: true,
      nodeIntegration: false,
      preload: path.join(app.getAppPath(), 'preload.js') // Specifies a script that will be loaded before other scripts run in the page. This script will always have access to node APIs no matter whether node integration is turned on or off. The value should be the absolute file path to the script. When node integration is turned off, the preload script can reintroduce Node global symbols back to the global scope.
    }
  })
  ...
})

渲染器

<webview 
src="https://somewebpage.com" 
preload="./preload.js" 
nodeintegrationinsubframes>

preload.js

/* It can be used by the preload script to add removed Node global symbols back to the global scope when node integration is turned off */
const _setImmediate = setImmediate
const _clearImmediate = clearImmediate
process.once('loaded', () => {
  global.setImmediate = _setImmediate
  global.clearImmediate = _clearImmediate
})

我的回答基于以下资源：

电子文档： Tag
电子文档： BrowserWindow
电子文档：process
电子文档：Web embeds in Electron - WebViews
电子文档：Preload Example

【讨论】：