Electron 中的webview

⚠️注意：

1. Electron的 webview 标签基于 Chromium webview ，后者正在经历巨大的架构变化。 这将影响 webview 的稳定性，包括呈现、导航和事件路由。 我们目前建议不使用 webview 标签，并考虑其他替代方案，如 iframe ，Electron的 BrowserView 或完全避免嵌入内容的架构。[引自Electron官方]
2. 默认情况下，Electron版本 >= 5，禁用 webview 标签。 在构造 BrowserWindow 时，需要通过设置 webviewTag webPreferences选项来启用标签

为什么是 webview?

对于高可复用、不强依赖端能力（需要灵活更新的业务场景）进行兼容和开发，简而言之就是已经开发了web页面，想要以极小的代价构建出一个桌面端。那么Electron的webview是一个不错的选择。

webview缺少什么

• 端能力
• 容器数据
• 容器环境
• webview与容器通信

配置webview

1. 配置加载src

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

2. 注入JS

<!-- from a file -->
<webview src="https://www.github.com/" preload="./test.js"></webview>
<!-- or if you want to load from an asar archive -->
<webview src="https://www.github.com/" preload="./app.asar/test.js"></webview>

    // 注入JS通信
    const { ipcRenderer } = require('electron');
    ipcRenderer.on('ping', () => {
        ipcRenderer.sendToHost('pong');
    });

当访客页没有 node integration ，这个脚本仍然有能力去访问所有的 Node APIs, 但是当这个脚本执行执行完成之后，通过Node 注入的全局对象（global objects）将会被删除。

3. 设置 useragent

<webview src="https://www.github.com/" useragent="Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko"></webview>

4. 数据通讯 ipc-message(配合注入JS通信)

    const webview = document.querySelector('webview');
    webview.addEventListener('ipc-message', (event) => {
        console.log(event.channel);
        // Prints "pong";
    });
    webview.send('ping');

架构要点

通过一定的规范约束，为内嵌页提供宿主环境（注入环境、数据缓存）、赋能端能力。这样就可以通过通信机制实现内嵌页面对端能力的调用。