WebView 访问属主上下文

在 Electron 中，webview.executeJavaScript方法在 WebView 页面的上下文中运行代码，这意味着 webview.executeJavaScript中的作用域与 Electron 应用程序的外部作用域（主进程或渲染进程）隔离。在webview.executeJavaScript中不能直接访问父窗口（属主）中的上下文。

我们可以将这些外部变量的值传递给 WebView。通过将它们插入到正在执行的代码中来执行 Javascript 上下文。你可以这样做：

通过字符串插值传递变量

我们可以通过将变量作为字符串插入到我们在 webview.executeJavaScript 中执行的 JavaScript 代码中，从而将外部上下文中的变量传递到 WebView 中。

示例：

const myVar = '来自外部的问候！';

webview.addEventListener('did-finish-load', () => {
    // 将变量 'myVar' 从外部传递到 WebView 的上下文中
    webview.executeJavaScript(`
        const injectedVar = "${myVar}";
        console.log('注入的变量:', injectedVar);
    `);
});

在这个示例中，主窗口上下文中的 myVar 变量通过字符串插值传递到 WebView 的执行上下文中。

使用 JSON 字符串化安全地传递变量

当传递更复杂的数据结构（如对象或数组）时，使用 JSON.stringify 将变量转换为 JSON 字符串，然后安全地注入到 WebView 的上下文中。

示例：

const myObject = { key: 'value', otherKey: 123 };

webview.addEventListener('did-finish-load', () => {
    // 通过字符串化对象安全地传递它
    webview.executeJavaScript(`
        const injectedObject = ${JSON.stringify(myObject)};
        console.log('注入的对象:', injectedObject);
        console.log('Key:', injectedObject.key);
    `);
});

此方法确保变量被序列化为可以安全传递到 WebView 的格式。

使用模板字符串传递更复杂的代码

如果我们需要传递多个变量或更复杂的表达式，可以使用 JavaScript 模板字符串来更轻松地进行字符串插值。

示例：

const userName = 'Alice';
const userAge = 25;

webview.addEventListener('did-finish-load', () => {
    webview.executeJavaScript(`
        const name = "${userName}";
        const age = ${userAge};
        console.log('用户名:', name);
        console.log('年龄:', age);
    `);
});

在这个示例中，来自主窗口上下文的 userName 和 userAge 被传递到 WebView，并在 WebView 执行的 JavaScript 代码中使用。

将函数传递到 WebView 中

如果我们想传递函数或更动态的数据，我们需要将函数定义字符串化，因为函数不能直接在 WebView 边界之间传递。

示例：

const myFunction = () => {
    console.log('这是从主窗口传递的函数。');
};

webview.addEventListener('did-finish-load', () => {
    webview.executeJavaScript(`
        const myInjectedFunction = ${myFunction.toString()};
        eval('(' + myInjectedFunction + ')()');
    `);
});

在此示例中，函数被作为字符串传递，然后通过 eval 在 WebView 中将其重新转换回函数。

安全传递大量数据

如果我们要传递大量数据（如大型对象或数组），我们可以使用 IPC（进程间通信）将数据发送到 WebView，而不是直接注入到 webview.executeJavaScript 中。

使用 IPC 的示例：

使用 IPC 将数据发送到 WebView：

在主窗口（渲染进程）中：

const { ipcRenderer } = require('electron');
const largeData = { key: '一些大的数据' };

// 当 WebView 准备好时，发送数据
webview.addEventListener('dom-ready', () => {
    webview.send('load-data', largeData);
});

在 WebView 中接收数据：

在 webview.executeJavaScript 中：

webview.addEventListener('dom-ready', () => {
    webview.executeJavaScript(`
        const { ipcRenderer } = require('electron');
        
        ipcRenderer.on('load-data', (event, data) => {
            console.log('从主窗口接收到的数据:', data);
        });
    `);
});

小结

字符串插值：使用简单的字符串插值将变量或值直接传递到 WebView 上下文中。
JSON 字符串化：对于复杂的对象或数组，使用 JSON.stringify() 将数据序列化，然后传递到 WebView 中。
函数：我们可以通过 .toString() 方法将函数转换为字符串，然后在 WebView 中通过 eval 将其重新转换回函数。
IPC：对于更复杂的交互（例如传递大数据或频繁的通信），使用 Electron 的 ipcRenderer 和 ipcMain 在 WebView 和主窗口之间发送消息和数据。