跳至主要内容

<webview> 标签

警告​

Electron 的 webview 标签基于 Chromium 的 webview，它正在经历重大的架构变更。这会影响 webview 的稳定性，包括渲染、导航和事件路由。我们目前建议不要使用 webview 标签，并考虑使用替代方案，如 iframe、WebContentsView 或完全避免嵌入内容的架构。

启用​

默认情况下，Electron >= 5 中禁用了 webview 标签。你需要通过在构建 BrowserWindow 时设置 webviewTag webPreferences 选项来启用该标签。有关更多信息，请参阅 BrowserWindow 构造函数文档。

概述​

在隔离的框架和进程中显示外部网页内容。

进程: 渲染器
此类未从 'electron' 模块导出。它只能作为 Electron API 中其他方法的返回值使用。

使用 webview 标签在你的 Electron 应用中嵌入“访客”内容（例如网页）。访客内容包含在 webview 容器中。应用中的嵌入页面控制访客内容的布局和渲染方式。

与 iframe 不同，webview 在与你的应用不同的进程中运行。它没有与你的网页相同的权限，并且你的应用与嵌入内容之间的所有交互都是异步的。这可以保护你的应用免受嵌入内容的攻击。注意：大多数从主机页面调用 webview 的方法都需要同步调用主进程。

示例​

要在你的应用中嵌入网页，请将 webview 标签添加到你的应用的嵌入器页面（这是将显示访客内容的应用页面）。最简单的形式是，webview 标签包含网页的 src 和控制 webview 容器外观的 CSS 样式。

<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>

如果你想以任何方式控制访客内容，你可以编写 JavaScript 代码来监听 webview 事件，并使用 webview 方法响应这些事件。以下是一段示例代码，其中包含两个事件监听器：一个监听网页开始加载，另一个监听网页停止加载，并在加载期间显示“正在加载...”消息。

<script>
  onload = () => {
    const webview = document.querySelector('webview')
    const indicator = document.querySelector('.indicator')

    const loadstart = () => {
      indicator.innerText = 'loading...'
    }

    const loadstop = () => {
      indicator.innerText = ''
    }

    webview.addEventListener('did-start-loading', loadstart)
    webview.addEventListener('did-stop-loading', loadstop)
  }
</script>

内部实现​

在底层，webview 使用 进程外 iframe (OOPIF) 实现。webview 标签本质上是一个使用影子 DOM 将 iframe 元素包装在其中的自定义元素。

因此，webview 的行为与跨域 iframe 非常相似，例如

  • 单击 webview 时，页面焦点将从嵌入器框架移动到 webview。
  • 你不能向 webview 添加键盘、鼠标和滚动事件监听器。
  • 嵌入器框架与 webview 之间的所有反应都是异步的。

CSS 样式说明​

请注意，webview 标签的样式在内部使用 display:flex; 来确保子 iframe 元素在与传统布局和弹性盒布局一起使用时填充其 webview 容器的整个高度和宽度。请不要覆盖默认的 display:flex; CSS 属性，除非指定 display:inline-flex; 用于内联布局。

标签属性​

webview 标签具有以下属性

src​

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

表示可见 URL 的 字符串。写入此属性将启动顶层导航。

为 src 赋值其自身值将重新加载当前页面。

src 属性还可以接受数据 URL，例如 data:text/plain,Hello, world!。

nodeintegration​

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

一个 布尔值。当此属性存在时，webview 中的访客页面将具有 Node 集成，并且可以使用诸如 require 和 process 之类的 Node API 来访问低级系统资源。访客页面默认禁用 Node 集成。

nodeintegrationinsubframes​

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

一个用于启用 webview 中子框架（例如 iframe）中的 NodeJS 支持的实验性选项的 布尔值。所有预加载程序都将为每个 iframe 加载，你可以使用 process.isMainFrame 来确定你是在主框架中还是不在主框架中。访客页面默认禁用此选项。

plugins​

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

一个 布尔值。当此属性存在时，webview 中的访客页面将能够使用浏览器插件。插件默认禁用。

preload​

<!-- 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>

一个 字符串，它指定将在访客页面中其他脚本运行之前加载的脚本。脚本 URL 的协议必须为 file:（即使使用 asar: 存档），因为它将在底层由 Node 的 require 加载，后者将 asar: 存档视为虚拟目录。

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

httpreferrer​

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

一个 字符串，它设置访客页面的推荐人 URL。

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>

一个 字符串，它在导航到页面之前设置访客页面的用户代理。页面加载后，使用 setUserAgent 方法更改用户代理。

disablewebsecurity​

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

一个 布尔值。当此属性存在时，访客页面将禁用网页安全。网页安全默认启用。

此值只能在首次导航之前修改。

partition​

<webview src="https://github.com" partition="persist:github"></webview>
<webview src="https://www.electron.js.cn" partition="electron"></webview>

一个 字符串，它设置页面使用的会话。如果 partition 以 persist: 开头，页面将使用对所有具有相同 partition 的应用页面可用的持久会话。如果没有 persist: 前缀，页面将使用内存中会话。通过分配相同的 partition，多个页面可以共享相同的会话。如果 partition 未设置，则将使用应用的默认会话。

此值只能在首次导航之前修改，因为活动渲染器进程的会话无法更改。随后尝试修改该值将导致 DOM 异常。

allowpopups​

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

一个 布尔值。当此属性存在时，访客页面将被允许打开新窗口。弹出窗口默认禁用。

webpreferences​

<webview src="https://github.com" webpreferences="allowRunningInsecureContent, javascript=no"></webview>

一个 字符串，它是一个逗号分隔的字符串列表，用于指定要设置在 webview 上的 web 首选项。在 BrowserWindow 中可以找到支持的首选项字符串的完整列表。

该字符串遵循与 window.open 中的特性字符串相同的格式。一个名称本身被赋予 true 布尔值。可以通过包含一个 =、后跟值来将首选项设置为另一个值。特殊值 yes 和 1 被解释为 true，而 no 和 0 被解释为 false。

enableblinkfeatures​

<webview src="https://www.github.com/" enableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>

一个 字符串，它是一个逗号分隔的字符串列表，用于指定要启用的 blink 特性。支持的特性字符串的完整列表可以在 RuntimeEnabledFeatures.json5 文件中找到。

disableblinkfeatures​

<webview src="https://www.github.com/" disableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>

一个string，它是一个字符串列表，指定要禁用的闪烁功能，用,分隔。受支持功能字符串的完整列表可以在RuntimeEnabledFeatures.json5文件中找到。

方法​

webview标签有以下方法

注意：使用这些方法之前，必须加载webview元素。

示例

const webview = document.querySelector('webview')
webview.addEventListener('dom-ready', () => {
  webview.openDevTools()
})

<webview>.loadURL(url[, options])​

  • url URL
  • options 对象（可选）
    • httpReferrer （字符串 | Referrer）(可选) - 一个HTTP Referrer URL。
    • userAgent 字符串（可选） - 发出请求的用户代理。
    • extraHeaders 字符串（可选） - 用“\n”分隔的额外头。
    • postData (UploadRawData | UploadFile)[] （可选）
    • baseURLForDataURL 字符串（可选） - 用于加载数据 URL 的文件的基 URL（带尾部路径分隔符）。仅当指定的 url 是数据 URL 并且需要加载其他文件时才需要此参数。

返回 Promise<void> - 当页面加载完毕时（参见did-finish-load），该 Promise 将解析，如果页面加载失败（参见did-fail-load），则会拒绝。

在 webview 中加载 url，url 必须包含协议前缀，例如 http:// 或 file://。

<webview>.downloadURL(url[, options])​

  • url 字符串
  • options 对象（可选）
    • headers Record<string, string> (可选) - HTTP 请求头。

在不导航的情况下启动对 url 处资源的下载。

<webview>.getURL()​

返回 string - 客戶端頁面的 URL。

<webview>.getTitle()​

返回 string - 客戶端頁面的標題。

<webview>.isLoading()​

返回 boolean - 客戶端頁面是否仍在加载资源。

<webview>.isLoadingMainFrame()​

返回 boolean - 主框架（不仅仅是 iframe 或其中的框架）是否仍在加载。

<webview>.isWaitingForResponse()​

返回 boolean - 客戶端頁面是否正在等待页面主资源的第一个响应。

<webview>.stop()​

停止任何挂起的导航。

<webview>.reload()​

重新加载客戶端頁面。

<webview>.reloadIgnoringCache()​

重新加载客戶端頁面，并忽略缓存。

<webview>.canGoBack()​

返回 boolean - 客戶端頁面是否可以后退。

<webview>.canGoForward()​

返回 boolean - 客戶端頁面是否可以前进。

<webview>.canGoToOffset(offset)​

  • offset 整数

返回 boolean - 客戶端頁面是否可以跳转到 offset。

<webview>.clearHistory()​

清除导航历史记录。

<webview>.goBack()​

使客戶端頁面后退。

<webview>.goForward()​

使客戶端頁面前进。

<webview>.goToIndex(index)​

  • index 整数

导航到指定的绝对索引。

<webview>.goToOffset(offset)​

  • offset 整数

导航到距“当前条目”指定偏移量的位置。

<webview>.isCrashed()​

返回 boolean - 渲染器进程是否已崩溃。

<webview>.setUserAgent(userAgent)​

  • userAgent 字符串

覆盖客戶端頁面的用户代理。

<webview>.getUserAgent()​

返回 string - 客戶端頁面的用户代理。

<webview>.insertCSS(css)​

  • css 字符串

返回 Promise<string> - 一个 Promise，解析为已插入 CSS 的键，该键可以稍后用于通过 <webview>.removeInsertedCSS(key) 删除 CSS。

将 CSS 注入当前网页，并返回已插入样式表的唯一键。

<webview>.removeInsertedCSS(key)​

  • key 字符串

返回 Promise<void> - 如果删除成功，则解析。

从当前网页中删除已插入的 CSS。样式表由其键标识，该键从 <webview>.insertCSS(css) 返回。

<webview>.executeJavaScript(code[, userGesture])​

  • code 字符串
  • userGesture 布尔值（可选） - 默认值为 false。

返回 Promise<any> - 一个 Promise，解析为已执行代码的结果，如果代码的结果是一个被拒绝的 Promise，则会拒绝。

在页面中执行 code。如果设置了 userGesture，它将在页面中创建用户手势上下文。需要用户操作的 HTML API（如 requestFullScreen）可以利用此选项进行自动化。

<webview>.openDevTools()​

为客戶端頁面打开一个 DevTools 窗口。

<webview>.closeDevTools()​

关闭客戶端頁面的 DevTools 窗口。

<webview>.isDevToolsOpened()​

返回 boolean - 客戶端頁面是否已附加 DevTools 窗口。

<webview>.isDevToolsFocused()​

返回 boolean - 客戶端頁面的 DevTools 窗口是否处于焦点状态。

<webview>.inspectElement(x, y)​

  • x 整数
  • y 整数

开始检查客戶端頁面 (x, y) 位置处的元素。

<webview>.inspectSharedWorker()​

为客戶端頁面中存在的共享工作程序上下文打开 DevTools。

<webview>.inspectServiceWorker()​

为客戶端頁面中存在的服务工作程序上下文打开 DevTools。

<webview>.setAudioMuted(muted)​

  • muted 布尔值

设置客戶端頁面静音。

<webview>.isAudioMuted()​

返回 boolean - 客戶端頁面是否已静音。

<webview>.isCurrentlyAudible()​

返回 boolean - 音频是否正在播放。

<webview>.undo()​

在页面中执行编辑命令 undo。

<webview>.redo()​

在页面中执行编辑命令 redo。

<webview>.cut()​

在页面中执行编辑命令 cut。

<webview>.copy()​

在页面中执行编辑命令 copy。

<webview>.centerSelection()​

将页面中当前的文本选择居中。

<webview>.paste()​

在页面中执行编辑命令 paste。

<webview>.pasteAndMatchStyle()​

在页面中执行编辑命令 pasteAndMatchStyle。

<webview>.delete()​

在页面中执行编辑命令 delete。

<webview>.selectAll()​

在页面中执行编辑命令 selectAll。

<webview>.unselect()​

在页面中执行编辑命令 unselect。

<webview>.scrollToTop()​

滚动到当前 <webview> 的顶部。

<webview>.scrollToBottom()​

滚动到当前 <webview> 的底部。

<webview>.adjustSelection(options)​

  • options 对象
    • start 数字 (可选) - 当前选区起始索引的偏移量。
    • end 数字 (可选) - 当前选区结束索引的偏移量。

根据给定的偏移量调整当前文本选区在焦点框架中的起始和结束点。负数偏移量将选区移动到文档开头，正数偏移量将选区移动到文档结尾。

参见 webContents.adjustSelection 获取示例。

<webview>.replace(text)​

  • text 字符串

在页面中执行编辑命令 replace。

<webview>.replaceMisspelling(text)​

  • text 字符串

在页面中执行编辑命令 replaceMisspelling。

<webview>.insertText(text)​

  • text 字符串

返回 Promise<void>

将 text 插入到焦点元素中。

<webview>.findInPage(text[, options])​

  • text 字符串 - 要搜索的内容，不能为空。
  • options 对象（可选）
    • forward 布尔值 (可选) - 是否向前或向后搜索，默认为 true。
    • findNext 布尔值 (可选) - 是否从此请求开始新的文本查找会话。初始请求应为 true，后续请求应为 false。默认为 false。
    • matchCase 布尔值 (可选) - 搜索是否区分大小写，默认为 false。

返回 Integer - 请求使用的请求 ID。

启动在网页中查找 text 的所有匹配项的请求。可以通过订阅 found-in-page 事件获取请求结果。

<webview>.stopFindInPage(action)​

  • action 字符串 - 指定结束 <webview>.findInPage 请求时要执行的操作。
    • clearSelection - 清除选区。
    • keepSelection - 将选区转换为普通选区。
    • activateSelection - 焦点并点击选区节点。

使用提供的 action 停止 webview 的任何 findInPage 请求。

<webview>.print([options])​

  • options 对象（可选）
    • silent 布尔值 (可选) - 不要向用户询问打印设置。默认为 false。
    • printBackground 布尔值 (可选) - 打印网页的背景颜色和图片。默认为 false。
    • deviceName 字符串 (可选) - 设置要使用的打印机设备名称。必须是系统定义的名称，而不是“友好”名称，例如“Brother_QL_820NWB”，而不是“Brother QL-820NWB”。
    • color 布尔值 (可选) - 设置打印的网页是否为彩色或灰度。默认为 true。
    • margins 对象 (可选)
      • marginType 字符串 (可选) - 可以是 default、none、printableArea 或 custom。如果选择 custom，还需要指定 top、bottom、left 和 right。
      • top 数字 (可选) - 打印网页的顶部边距，以像素为单位。
      • bottom 数字 (可选) - 打印网页的底部边距，以像素为单位。
      • left 数字 (可选) - 打印网页的左边距，以像素为单位。
      • right 数字 (可选) - 打印网页的右边距，以像素为单位。
    • landscape 布尔值 (可选) - 网页是否应该以横向模式打印。默认为 false。
    • scaleFactor 数字 (可选) - 网页的缩放比例。
    • pagesPerSheet 数字 (可选) - 每张纸要打印的页面数量。
    • collate 布尔值 (可选) - 网页是否应该进行整理。
    • copies 数字 (可选) - 要打印的网页副本数量。
    • pageRanges 对象[] (可选) - 要打印的页面范围。
      • from 数字 - 要打印的第一个页面的索引（从 0 开始）。
      • to 数字 - 要打印的最后一个页面的索引（包含）（从 0 开始）。
    • duplexMode 字符串 (可选) - 设置打印网页的双面模式。可以是 simplex、shortEdge 或 longEdge。
    • dpi Record<string, number> (可选)
      • horizontal 数字 (可选) - 水平 DPI。
      • vertical 数字 (可选) - 垂直 DPI。
    • header 字符串 (可选) - 要作为页面页眉打印的字符串。
    • footer 字符串 (可选) - 要作为页面页脚打印的字符串。
    • pageSize 字符串 | 尺寸 (可选) - 指定打印文档的页面尺寸。可以是 A3、A4、A5、Legal、Letter、Tabloid 或包含 height（以微米为单位）的对象。

返回 Promise<void>

打印 webview 的网页。与 webContents.print([options]) 相同。

<webview>.printToPDF(options)​

  • options 对象
    • landscape 布尔值 (可选) - 纸张方向。true 表示横向，false 表示纵向。默认为 false。
    • displayHeaderFooter 布尔值 (可选) - 是否显示页眉和页脚。默认为 false。
    • printBackground 布尔值 (可选) - 是否打印背景图形。默认为 false。
    • scale 数字 (可选) - 网页渲染的比例。默认为 1。
    • pageSize 字符串 | 尺寸 (可选) - 指定生成的 PDF 的页面尺寸。可以是 A0、A1、A2、A3、A4、A5、A6、Legal、Letter、Tabloid、Ledger 或包含 height 和 width（以英寸为单位）的对象。默认为 Letter。
    • margins 对象 (可选)
      • top 数字 (可选) - 顶部边距，以英寸为单位。默认为 1 厘米（约 0.4 英寸）。
      • bottom 数字 (可选) - 底部边距，以英寸为单位。默认为 1 厘米（约 0.4 英寸）。
      • left 数字 (可选) - 左边距，以英寸为单位。默认为 1 厘米（约 0.4 英寸）。
      • right 数字 (可选) - 右边距，以英寸为单位。默认为 1 厘米（约 0.4 英寸）。
    • pageRanges 字符串 (可选) - 要打印的页面范围，例如“1-5, 8, 11-13”。默认为空字符串，这意味着打印所有页面。
    • headerTemplate 字符串 (可选) - 打印页眉的 HTML 模板。应该是有效的 HTML 标记，使用以下类来将打印值注入其中：date（格式化的打印日期）、title（文档标题）、url（文档位置）、pageNumber（当前页码）和 totalPages（文档中的总页数）。例如，<span class=title></span> 将生成包含标题的 span。
    • footerTemplate 字符串 (可选) - 打印页脚的 HTML 模板。应使用与 headerTemplate 相同的格式。
    • preferCSSPageSize 布尔值 (可选) - 是否优先使用 css 中定义的页面尺寸。默认为 false，在这种情况下，内容将缩放到适合纸张尺寸。
    • generateTaggedPDF 布尔值 (可选) Experimental - 是否生成带标签的（可访问的）PDF。默认为 false。由于此属性是实验性的，因此生成的 PDF 可能无法完全符合 PDF/UA 和 WCAG 标准。
    • generateDocumentOutline 布尔值 (可选) Experimental - 是否从内容标题生成 PDF 文档大纲。默认为 false。

返回 Promise<Uint8Array> - 使用生成的 PDF 数据解析。

将 webview 的网页打印为 PDF，与 webContents.printToPDF(options) 相同。

<webview>.capturePage([rect])​

  • rect Rectangle (可选) - 要捕获的页面区域。

返回 Promise<NativeImage> - 使用 NativeImage 解析。

捕获 rect 内页面的快照。省略 rect 将捕获整个可见页面。

<webview>.send(channel, ...args)​

  • channel 字符串
  • ...args any[]

返回 Promise<void>

通过 channel 向渲染进程发送异步消息，还可以发送任意参数。渲染进程可以通过使用 ipcRenderer 模块侦听 channel 事件来处理消息。

参见 webContents.send 获取示例。

<webview>.sendToFrame(frameId, channel, ...args)​

  • frameId [数字, 数字] - [processId, frameId]
  • channel 字符串
  • ...args any[]

返回 Promise<void>

通过 channel 向渲染进程发送异步消息，还可以发送任意参数。渲染进程可以通过使用 ipcRenderer 模块侦听 channel 事件来处理消息。

参见 webContents.sendToFrame 获取示例。

<webview>.sendInputEvent(event)​

返回 Promise<void>

向页面发送输入 event。

参见 webContents.sendInputEvent 获取 event 对象的详细描述。

<webview>.setZoomFactor(factor)​

  • factor 数字 - 缩放比例。

将缩放比例更改为指定的比例。缩放比例是缩放百分比除以 100，因此 300% = 3.0。

<webview>.setZoomLevel(level)​

  • level 数字 - 缩放级别。

将缩放级别更改为指定的级别。原始大小为 0，每个向上或向下增量分别表示比原始大小大 20% 或小 20%，直到默认限制分别为原始大小的 300% 和 50%。此公式为 scale := 1.2 ^ level。

注意：Chromium 级别上的缩放策略是同源策略，这意味着特定域的缩放级别会传播到具有相同域的所有窗口实例。区分窗口 URL 将使缩放功能按窗口运行。

<webview>.getZoomFactor()​

返回 数字 - 当前缩放比例。

<webview>.getZoomLevel()​

返回 数字 - 当前缩放级别。

<webview>.setVisualZoomLevelLimits(minimumLevel, maximumLevel)​

  • minimumLevel 数字
  • maximumLevel 数字

返回 Promise<void>

设置最大和最小捏合缩放级别。

<webview>.showDefinitionForSelection() macOS​

显示弹出词典，该词典将在页面上搜索选定的单词。

<webview>.getWebContentsId()​

返回 number - 此 webview 的 WebContents ID。

DOM 事件​

以下 DOM 事件可用于 webview 标签

事件：'load-commit'​

返回

  • url 字符串
  • isMainFrame 布尔值

在加载提交时触发。这包括当前文档内的导航以及子帧文档级加载，但不包括异步资源加载。

事件：'did-finish-load'​

在导航完成时触发，即标签的旋转器将停止旋转，并且将分派 onload 事件。

事件：'did-fail-load'​

返回

  • errorCode 整数
  • errorDescription 字符串
  • validatedURL 字符串
  • isMainFrame 布尔值

此事件类似于 did-finish-load，但在加载失败或被取消时触发，例如调用 window.stop()。

事件：'did-frame-finish-load'​

返回

  • isMainFrame 布尔值

在帧完成导航时触发。

事件：'did-start-loading'​

对应于标签旋转器开始旋转的时间点。

事件：'did-stop-loading'​

对应于标签旋转器停止旋转的时间点。

事件：'did-attach'​

在附加到嵌入器 Web 内容时触发。

事件：'dom-ready'​

在给定帧中的文档加载时触发。

事件：'page-title-updated'​

返回

  • title 字符串
  • explicitSet 布尔值

在导航期间设置页面标题时触发。当标题从文件 URL 合成时，explicitSet 为 false。

事件：'page-favicon-updated'​

返回

  • favicons 字符串[] - URL 数组。

在页面接收网站图标 URL 时触发。

事件：'enter-html-full-screen'​

在页面通过 HTML API 触发进入全屏模式时触发。

事件：'leave-html-full-screen'​

在页面通过 HTML API 触发退出全屏模式时触发。

事件：'console-message'​

返回

  • level 整数 - 日志级别，从 0 到 3。按顺序，它对应于 verbose、info、warning 和 error。
  • message 字符串 - 实际的控制台消息
  • line 整数 - 触发此控制台消息的源的代码行号
  • sourceId 字符串

在访客窗口记录控制台消息时触发。

以下示例代码将所有日志消息转发到嵌入器的控制台，而不考虑日志级别或其他属性。

const webview = document.querySelector('webview')
webview.addEventListener('console-message', (e) => {
  console.log('Guest page logged a message:', e.message)
})

事件：'found-in-page'​

返回

  • result 对象
    • requestId 整数
    • activeMatchOrdinal 整数 - 活动匹配的位置。
    • matches 整数 - 匹配数量。
    • selectionArea 矩形 - 第一个匹配区域的坐标。
    • finalUpdate 布尔值

在 webview.findInPage 请求有结果时触发。

const webview = document.querySelector('webview')
webview.addEventListener('found-in-page', (e) => {
  webview.stopFindInPage('keepSelection')
})

const requestId = webview.findInPage('test')
console.log(requestId)

事件：'will-navigate'​

返回

  • url 字符串

在用户或页面想要开始导航时发出。当更改 window.location 对象或用户在页面中单击链接时，可能会发生这种情况。

此事件不会在使用 <webview>.loadURL 和 <webview>.back 等 API 以编程方式启动导航时发出。

它也不会在页面内导航期间发出，例如单击锚点链接或更新 window.location.hash。为此目的，请使用 did-navigate-in-page 事件。

调用 event.preventDefault() 不会有任何影响。

事件：'will-frame-navigate'​

返回

  • url 字符串
  • isMainFrame 布尔值
  • frameProcessId 整数
  • frameRoutingId 整数

在用户或页面想要在 <webview> 或任何嵌入其中的框架中开始导航时发出。当更改 window.location 对象或用户在页面中单击链接时，可能会发生这种情况。

此事件不会在使用 <webview>.loadURL 和 <webview>.back 等 API 以编程方式启动导航时发出。

它也不会在页面内导航期间发出，例如单击锚点链接或更新 window.location.hash。为此目的，请使用 did-navigate-in-page 事件。

调用 event.preventDefault() 不会有任何影响。

事件：'did-start-navigation'​

返回

  • url 字符串
  • isInPlace 布尔值
  • isMainFrame 布尔值
  • frameProcessId 整数
  • frameRoutingId 整数

在任何帧（包括主帧）开始导航时发出。对于页面内导航，isInPlace 将为 true。

事件：'did-redirect-navigation'​

返回

  • url 字符串
  • isInPlace 布尔值
  • isMainFrame 布尔值
  • frameProcessId 整数
  • frameRoutingId 整数

在导航期间发生服务器端重定向后发出。例如 302 重定向。

事件：'did-navigate'​

返回

  • url 字符串

在导航完成时发出。

此事件不会在页面内导航期间发出，例如单击锚点链接或更新 window.location.hash。为此目的，请使用 did-navigate-in-page 事件。

事件：'did-frame-navigate'​

返回

  • url 字符串
  • httpResponseCode 整数 - 对于非 HTTP 导航，为 -1
  • httpStatusText 字符串 - 对于非 HTTP 导航，为空
  • isMainFrame 布尔值
  • frameProcessId 整数
  • frameRoutingId 整数

在任何帧导航完成时发出。

此事件不会在页面内导航期间发出，例如单击锚点链接或更新 window.location.hash。为此目的，请使用 did-navigate-in-page 事件。

事件：'did-navigate-in-page'​

返回

  • isMainFrame 布尔值
  • url 字符串

在发生页面内导航时发出。

当发生页面内导航时，页面 URL 会更改，但不会导致页面外的导航。发生这种情况的示例包括单击锚点链接或触发 DOM hashchange 事件。

事件：'close'​

在访客页面尝试关闭自身时触发。

以下示例代码在访客尝试关闭自身时将 webview 导航到 about:blank。

const webview = document.querySelector('webview')
webview.addEventListener('close', () => {
  webview.src = 'about:blank'
})

事件：'ipc-message'​

返回

  • frameId [number, number] - [processId, frameId] 对。
  • channel 字符串
  • args any[]

在访客页面已向嵌入器页面发送异步消息时触发。

使用 sendToHost 方法和 ipc-message 事件，您可以在访客页面和嵌入器页面之间进行通信

// In embedder page.
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel)
  // Prints "pong"
})
webview.send('ping')
// In guest page.
const { ipcRenderer } = require('electron')
ipcRenderer.on('ping', () => {
  ipcRenderer.sendToHost('pong')
})

事件：'render-process-gone'​

返回

在渲染器进程意外消失时触发。这通常是因为它崩溃或被终止。

事件：'plugin-crashed'​

返回

  • name 字符串
  • version 字符串

在插件进程崩溃时触发。

事件：'destroyed'​

在 WebContents 被销毁时触发。

事件：'media-started-playing'​

在媒体开始播放时发出。

事件：'media-paused'​

在媒体暂停或播放完毕时发出。

事件：'did-change-theme-color'​

返回

  • themeColor 字符串

在页面的主题颜色更改时发出。这通常是由于遇到了元标签。

<meta name='theme-color' content='#ff0000'>

事件：'update-target-url'​

返回

  • url 字符串

在鼠标悬停在链接上或键盘将焦点移动到链接上时发出。

事件：'devtools-open-url'​

返回

  • url 字符串 - 被单击或选择的链接的 URL。

在 DevTools 中单击链接或在它的上下文菜单中选择“在新标签页中打开”时发出。

事件：'devtools-search-query'​

返回

  • event 事件
  • query 字符串 - 要查询的文本。

在它的上下文菜单中选择“搜索”以搜索文本时发出。

事件：'devtools-opened'​

在打开 DevTools 时发出。

事件：'devtools-closed'​

在关闭 DevTools 时发出。

事件：'devtools-focused'​

在 DevTools 获得焦点 / 打开时发出。

事件：'context-menu'​

返回

  • params 对象
    • x 整数 - x 坐标。
    • y 整数 - y 坐标。
    • linkURL 字符串 - 包含上下文菜单调用的节点的链接的 URL。
    • linkText 字符串 - 与链接关联的文本。如果链接的内容是图像，则可能为空字符串。
    • pageURL 字符串 - 调用上下文菜单的顶级页面的 URL。
    • frameURL 字符串 - 调用上下文菜单的子帧的 URL。
    • srcURL 字符串 - 上下文菜单调用的元素的源 URL。具有源 URL 的元素是图像、音频和视频。
    • mediaType 字符串 - 上下文菜单调用的节点类型。可以是 none、image、audio、video、canvas、file 或 plugin。
    • hasImageContents 布尔值 - 上下文菜单是否调用于具有非空内容的图像。
    • isEditable 布尔值 - 上下文是否可编辑。
    • selectionText 字符串 - 上下文菜单调用的选择的文本。
    • titleText 字符串 - 上下文菜单调用的选择的标题文本。
    • altText 字符串 - 上下文菜单调用的选择的替代文本。
    • suggestedFilename 字符串 - 通过上下文菜单的“另存为”选项保存文件时要使用的建议文件名。
    • selectionRect 矩形 - 表示选择在文档空间中的坐标的矩形。
    • selectionStartOffset 数字 - 选择文本的起始位置。
    • referrerPolicy 引用者 - 调用菜单的框架的引用者策略。
    • misspelledWord 字符串 - 光标下拼写错误的单词（如果有）。
    • dictionarySuggestions 字符串[] - 建议的单词数组，供用户替换 misspelledWord。仅在有拼写错误的单词且启用拼写检查器时可用。
    • frameCharset 字符串 - 调用菜单的框架的字符编码。
    • formControlType 字符串 - 上下文菜单调用的源。可能的值包括 none、button-button、field-set、input-button、input-checkbox、input-color、input-date、input-datetime-local、input-email、input-file、input-hidden、input-image、input-month、input-number、input-password、input-radio、input-range、input-reset、input-search、input-submit、input-telephone、input-text、input-time、input-url、input-week、output、reset-button、select-list、select-list、select-multiple、select-one、submit-button 和 text-area。
    • spellcheckEnabled 布尔值 - 如果上下文可编辑，则拼写检查是否已启用。
    • menuSourceType 字符串 - 调用上下文菜单的输入源。可以是 none、mouse、keyboard、touch、touchMenu、longPress、longTap、touchHandle、stylus、adjustSelection 或 adjustSelectionReset。
    • mediaFlags 对象 - 上下文菜单调用的媒体元素的标志。
      • inError 布尔值 - 媒体元素是否已崩溃。
      • isPaused 布尔值 - 媒体元素是否已暂停。
      • isMuted 布尔值 - 媒体元素是否已静音。
      • hasAudio 布尔值 - 媒体元素是否具有音频。
      • isLooping 布尔值 - 媒体元素是否正在循环。
      • isControlsVisible 布尔值 - 媒体元素的控件是否可见。
      • canToggleControls 布尔值 - 媒体元素的控件是否可切换。
      • canPrint 布尔值 - 媒体元素是否可打印。
      • canSave 布尔值 - 媒体元素是否可下载。
      • canShowPictureInPicture 布尔值 - 媒体元素是否可以显示画中画。
      • isShowingPictureInPicture 布尔值 - 媒体元素当前是否正在显示画中画。
      • canRotate 布尔值 - 媒体元素是否可以旋转。
      • canLoop 布尔值 - 媒体元素是否可以循环。
    • editFlags 对象 - 这些标志指示渲染器是否认为它能够执行相应的操作。
      • canUndo 布尔值 - 渲染器是否认为它可以撤消。
      • canRedo 布尔值 - 渲染器是否认为它可以重做。
      • canCut 布尔值 - 渲染器是否认为它可以剪切。
      • canCopy 布尔值 - 渲染器是否认为它可以复制。
      • canPaste 布尔值 - 渲染器是否认为它可以粘贴。
      • canDelete 布尔值 - 渲染器是否认为它可以删除。
      • canSelectAll 布尔值 - 渲染器是否认为它可以选择所有内容。
      • canEditRichly 布尔值 - 渲染器是否认为它可以富文本编辑。

当需要处理新的上下文菜单时发出。