`<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 標籤包括網頁的 src 和控制 webview 容器外觀的 CSS 樣式

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

如果您想以任何方式控制訪客內容，您可以編寫偵聽 webview 事件並使用 webview 方法響應這些事件的 JavaScript 程式碼。這是一個包含兩個事件偵聽器的示例程式碼：一個偵聽網頁開始載入，另一個偵聽網頁停止載入，並在載入期間顯示“正在載入...”訊息

<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 (OOPIFs) 實現。webview 標籤本質上是一個使用 shadow DOM 包裝 iframe 元素的自定義元素。

因此，webview 的行為與跨域 iframe 非常相似，例如

單擊 webview 時，頁面焦點將從嵌入器框架移動到 webview。
您無法將鍵盤、滑鼠和滾動事件偵聽器新增到 webview。
嵌入器框架和 webview 之間的所有互動都是非同步的。

CSS 樣式說明

請注意，webview 標籤的樣式內部使用 display:flex; 以確保子 iframe 元素填充 webview 容器的全部高度和寬度，在使用傳統佈局和 flexbox 佈局時。除非指定 display:inline-flex; 用於內聯佈局，否則請勿覆蓋預設的 display:flex; CSS 屬性。

標籤屬性

webview 標籤具有以下屬性

`src`

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

一個 string，表示可見的 URL。寫入此屬性會啟動頂級導航。

將 src 分配給它自己的值將重新載入當前頁面。

src 屬性也可以接受資料 URL，例如 data:text/plain,Hello, world!。

`nodeintegration`

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

一個 boolean。當此屬性存在時，webview 中的訪客頁面將具有節點整合，並可以使用節點 API（如 require 和 process）來訪問低階系統資源。預設情況下，訪客頁面中停用節點整合。

`nodeintegrationinsubframes`

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

一個 boolean，用於啟用 webview 內部 iframe（例如 iframe）中 NodeJS 支援的實驗性選項。您的所有預載入程式都將為每個 iframe 載入，您可以使用 process.isMainFrame 來確定您是在主框架中還是不在主框架中。預設情況下，訪客頁面中停用此選項。

`plugins`

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

一個 boolean。當此屬性存在時，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>

一個 string，指定將在訪客頁面中其他指令碼執行之前載入的指令碼。指令碼的 URL 協議必須是 file:（即使在使用 asar: 存檔時），因為它將在底層由 Node 的 require 載入，後者將 asar: 存檔視為虛擬目錄。

當訪客頁面沒有節點整合時，此指令碼仍然可以訪問所有 Node API，但 Node 注入的全域性物件將在此指令碼執行完畢後刪除。

`httpreferrer`

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

一個 string，為訪客頁面設定引用器 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>

一個 string，在導航到頁面之前為訪客頁面設定使用者代理。頁面載入後，使用 setUserAgent 方法更改使用者代理。

`disablewebsecurity`

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

一個 boolean。當此屬性存在時，訪客頁面的網路安全將被停用。預設情況下啟用網路安全。

此值只能在第一次導航之前修改。

`partition`

<webview src="https://github.com" partition="persist:github"></webview>
<webview src="https://electron.nodejs.com.tw" partition="electron"></webview>

一個 string，設定頁面使用的會話。如果 partition 以 persist: 開頭，則頁面將使用持久會話，該會話可供應用程式中具有相同 partition 的所有頁面使用。如果沒有 persist: 字首，則頁面將使用記憶體會話。透過分配相同的 partition，多個頁面可以共享相同的會話。如果未設定 partition，則將使用應用程式的預設會話。

此值只能在第一次導航之前修改，因為活動渲染程序的會話無法更改。後續嘗試修改該值將導致 DOM 異常。

`allowpopups`

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

一個 boolean。當此屬性存在時，訪客頁面將被允許開啟新視窗。預設情況下停用彈出視窗。

`webpreferences`

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

一個 string，它是一個由逗號分隔的字串列表，用於指定要在 webview 上設定的 web 首選項。完整的受支援首選項字串列表可以在 BrowserWindow 中找到。

該字串遵循與 window.open 中的 features 字串相同的格式。單獨的名稱將賦予 true 布林值。可以透過包含 = 後跟該值來將首選項設定為其他值。特殊值 yes 和 1 被解釋為 true，而 no 和 0 被解釋為 false。

`enableblinkfeatures`

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

一個 string，它是一個由逗號分隔的字串列表，用於指定要啟用的 blink 功能。完整的受支援功能字串列表可以在 RuntimeEnabledFeatures.json5 檔案中找到。

`disableblinkfeatures`

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

一個 string，它是一個由逗號分隔的字串列表，用於指定要停用的 blink 功能。完整的受支援功能字串列表可以在 RuntimeEnabledFeatures.json5 檔案中找到。

方法

webview 標籤具有以下方法

注意

在載入方法之前必須載入 webview 元素。

示例

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

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

url URL
options Object (可選)
- httpReferrer (string | Referrer) (可選) - 一個 HTTP Referrer URL。
- userAgent string (可選) - 發起請求的使用者代理。
- extraHeaders string (可選) - 額外的頭部資訊，用 "\n" 分隔
- postData (UploadRawData | UploadFile)[] (可選)
- baseURLForDataURL string (可選) - 用於透過 data url 載入檔案的基礎 URL（以尾部路徑分隔符結尾）。只有當指定的 url 是 data url 並且需要載入其他檔案時才需要此項。

返回 Promise<void> - 當頁面載入完成後，Promise 將會 resolve（參見 did-finish-load），如果頁面載入失敗，Promise 將會 reject（參見 did-fail-load）。

在 webview 中載入 url，url 必須包含協議字首，例如 http:// 或 file://。

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

url string
options Object (可選)
- 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 Integer

返回 boolean - 是否可以跳轉到 offset 位置。

`<webview>.clearHistory()`

清除導航歷史記錄。

`<webview>.goBack()`

使客體頁面返回。

`<webview>.goForward()`

使客體頁面前進。

`<webview>.goToIndex(index)`

index Integer

導航到指定的絕對索引。

`<webview>.goToOffset(offset)`

offset Integer

導航到從“當前條目”開始的指定偏移量。

`<webview>.isCrashed()`

返回 boolean - 渲染程序是否已崩潰。

`<webview>.setUserAgent(userAgent)`

userAgent string

覆蓋客體頁面的使用者代理。

`<webview>.getUserAgent()`

返回 string - 客體頁面的使用者代理。

`<webview>.insertCSS(css)`

css string

返回 Promise<string> - 一個 Promise，resolve 的值為插入 CSS 的 key，稍後可以使用 <webview>.removeInsertedCSS(key) 刪除 CSS。

將 CSS 注入當前網頁，並返回一個用於插入的樣式的唯一鍵，該鍵可以在之後透過 <webview>.removeInsertedCSS(css) 移除。

`<webview>.removeInsertedCSS(key)`

key string

返回 Promise<void> - 如果刪除成功，則 resolve。

從當前網頁中刪除插入的 CSS。樣式表由其 key 標識，該 key 由 <webview>.insertCSS(css) 返回。

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

code string
userGesture boolean (可選) - 預設值為 false。

返回 Promise<any> - 一個 Promise，resolve 的值為執行程式碼的結果，或者如果程式碼的結果是 rejected 的 Promise，則 reject。

在頁面中執行 code。如果設定了 userGesture，它將在頁面中建立使用者手勢上下文。HTML API（如 requestFullScreen，需要使用者操作）可以利用此選項進行自動化。

`<webview>.openDevTools()`

為客體頁面開啟 DevTools 視窗。

`<webview>.closeDevTools()`

關閉客體頁面的 DevTools 視窗。

`<webview>.isDevToolsOpened()`

返回 boolean - 客體頁面是否附加了 DevTools 視窗。

`<webview>.isDevToolsFocused()`

返回 boolean - 客體頁面的 DevTools 視窗是否處於焦點狀態。

`<webview>.inspectElement(x, y)`

x Integer
y Integer

開始檢查客體頁面位置 (x, y) 的元素。

`<webview>.inspectSharedWorker()`

開啟客體頁面中存在的共享 worker 上下文的 DevTools。

`<webview>.inspectServiceWorker()`

開啟客體頁面中存在的 service worker 上下文的 DevTools。

`<webview>.setAudioMuted(muted)`

muted boolean

設定客體頁面靜音。

`<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 Object
- start 數字 (可選) - 移動當前選擇的起始索引的量。
- end 數字 (可選) - 移動當前選擇的結束索引的量。

透過給定的量調整聚焦框架中當前文字選擇的起始和結束點。負數將選擇移動到文件的開頭，正數將選擇移動到文件的結尾。

請參閱 webContents.adjustSelection 以獲取示例。

`<webview>.replace(text)`

text string

在頁面中執行編輯命令 replace。

`<webview>.replaceMisspelling(text)`

text string

在頁面中執行編輯命令 replaceMisspelling。

`<webview>.insertText(text)`

text string

返回 Promise<void>

將 text 插入到焦點元素中。

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

text string - 要搜尋的內容，不能為空。
options Object (可選)
- forward boolean (可選) - 是否向前或向後搜尋，預設為 true。
- findNext boolean (可選) - 是否使用此請求開始新的文字查詢會話。對於初始請求應為 true，對於後續請求應為 false。預設為 false。
- matchCase boolean (可選) - 搜尋是否區分大小寫，預設為 false。

返回 Integer - 請求的請求 ID。

開始請求以查詢網頁中 text 的所有匹配項。可以透過訂閱 found-in-page 事件來獲取請求結果。

`<webview>.stopFindInPage(action)`

action string - 指定結束 <webview>.findInPage 請求時要執行的操作。
- clearSelection - 清除選區。
- keepSelection - 將選區轉換為普通選區。
- activateSelection - 聚焦並點選選區節點。

停止 webview 的任何 findInPage 請求，並提供 action。

`<webview>.print([options])`

options Object (可選)
- silent boolean (可選) - 不向使用者詢問列印設定。預設為 false。
- printBackground boolean (可選) - 列印網頁的背景顏色和影像。預設為 false。
- deviceName string (可選) - 設定要使用的印表機裝置名稱。必須是系統定義的名稱，而不是“友好”名稱，例如 'Brother_QL_820NWB' 而不是 'Brother QL-820NWB'。
- color boolean (可選) - 設定列印的網頁是彩色還是灰度。預設為 true。
- margins Object (可選)
  - marginType string (可選) - 可以是 default、none、printableArea 或 custom。如果選擇 custom，還需要指定 top、bottom、left 和 right。
  - top number (可選) - 列印網頁的上邊距，以畫素為單位。
  - bottom number (可選) - 列印網頁的下邊距，以畫素為單位。
  - left number (可選) - 列印網頁的左邊距，以畫素為單位。
  - right number (可選) - 列印網頁的右邊距，以畫素為單位。
- landscape boolean (可選) - 網頁是否應以橫向模式列印。預設為 false。
- scaleFactor number (可選) - 網頁的縮放比例。
- pagesPerSheet number (可選) - 每頁紙列印的頁數。
- collate boolean (可選) - 網頁是否應進行分頁整理。
- copies number (可選) - 要列印的網頁份數。
- pageRanges Object[] (可選) - 要列印的頁面範圍。
  - from number - 要列印的第一頁的索引（從 0 開始）。
  - to number - 要列印的最後一頁的索引（包括）(從 0 開始)。
- duplexMode string (可選) - 設定列印網頁的雙面模式。可以是 simplex、shortEdge 或 longEdge。
- dpi Record<string, number> (可選)
  - horizontal number (可選) - 水平 DPI。
  - vertical number (可選) - 垂直 DPI。
- header string (可選) - 作為頁面頁首列印的字串。
- footer string (可選) - 作為頁面頁尾列印的字串。
- pageSize string | Size (可選) - 指定列印文件的頁面大小。可以是 A3、A4、A5、Legal、Letter、Tabloid 或包含 height（以微米為單位）的物件。

返回 Promise<void>

列印 webview 的網頁。與 webContents.print([options]) 相同。

`<webview>.printToPDF(options)`

options Object
- landscape boolean (可選) - 紙張方向。true 表示橫向，false 表示縱向。預設為 false。
- displayHeaderFooter boolean (可選) - 是否顯示頁首和頁尾。預設為 false。
- printBackground boolean (可選) - 是否列印背景圖形。預設為 false。
- scale number(可選) - 網頁渲染的縮放比例。預設為 1。
- pageSize string | Size (可選) - 指定生成的 PDF 的頁面大小。可以是 A0、A1、A2、A3、A4、A5、A6、Legal、Letter、Tabloid、Ledger 或包含 height 和 width（以英寸為單位）的物件。預設為 Letter。
- margins Object (可選)
  - top number (可選) - 上邊距，以英寸為單位。預設為 1 釐米（約 0.4 英寸）。
  - bottom number (可選) - 下邊距，以英寸為單位。預設為 1 釐米（約 0.4 英寸）。
  - left number (可選) - 左邊距，以英寸為單位。預設為 1 釐米（約 0.4 英寸）。
  - right number (可選) - 右邊距，以英寸為單位。預設為 1 釐米（約 0.4 英寸）。
- pageRanges string (可選) - 要列印的頁面範圍，例如 '1-5, 8, 11-13'。預設為空字串，表示列印所有頁面。
- headerTemplate string (可選) - 列印頁首的 HTML 模板。應使用以下類來將列印值注入到其中：date（格式化的列印日期）、title（文件標題）、url（文件位置）、pageNumber（當前頁碼）和 totalPages（文件中的總頁數）。例如，<span class=title></span> 將生成包含標題的 span。
- footerTemplate string (可選) - 列印頁尾的 HTML 模板。應使用與 headerTemplate 相同的格式。
- preferCSSPageSize boolean (可選) - 是否優先使用 CSS 定義的頁面大小。預設為 false，在這種情況下，內容將被縮放以適應紙張大小。
- generateTaggedPDF boolean (可選) 實驗性 - 是否生成帶標籤（可訪問）的 PDF。預設為 false。由於此屬性是實驗性的，因此生成的 PDF 可能不完全符合 PDF/UA 和 WCAG 標準。
- generateDocumentOutline boolean (可選) 實驗性 - 是否從內容標題生成 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 string
...args any[]

返回 Promise<void>

透過 channel 向渲染程序傳送非同步訊息，您還可以傳送任意引數。渲染程序可以透過使用 ipcRenderer 模組監聽 channel 事件來處理該訊息。

有關示例，請參閱 webContents.send。

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

frameId [number, number] - [processId, frameId]
channel string
...args any[]

返回 Promise<void>

透過 channel 向渲染程序傳送非同步訊息，您還可以傳送任意引數。渲染程序可以透過使用 ipcRenderer 模組監聽 channel 事件來處理該訊息。

有關示例，請參閱 webContents.sendToFrame。

`<webview>.sendInputEvent(event)`

event MouseInputEvent | MouseWheelInputEvent | KeyboardInputEvent

返回 Promise<void>

將輸入 event 傳送到頁面。

有關 event 物件的詳細說明，請參閱 webContents.sendInputEvent。

`<webview>.setZoomFactor(factor)`

factor number - 縮放比例。

將縮放比例更改為指定的因子。縮放比例是縮放百分比除以 100，因此 300% = 3.0。

`<webview>.setZoomLevel(level)`

level number - 縮放級別。

將縮放級別更改為指定的級別。原始大小為 0，每個高於或低於原始大小的增量表示相對於預設限制的 300% 和 50% 的原始大小放大或縮小 20%。公式為 scale := 1.2 ^ level。

注意

Chromium 級別的縮放策略是同源策略，這意味著特定域的縮放級別會傳播到具有相同域的所有視窗例項。區分視窗 URL 將使縮放功能在每個視窗中生效。

`<webview>.getZoomFactor()`

返回 number - 當前縮放比例。

`<webview>.getZoomLevel()`

返回 number - 當前縮放級別。

`<webview>.setVisualZoomLevelLimits(minimumLevel, maximumLevel)`

minimumLevel number
maximumLevel number

返回 Promise<void>

設定捏合縮放的最大和最小級別。

`<webview>.showDefinitionForSelection()` macOS

顯示查詢頁面上選定單詞的彈出式字典。

`<webview>.getWebContentsId()`

返回 number - 此 webview 的 WebContents ID。

DOM 事件

以下 DOM 事件可用於 webview 標籤

事件: 'load-commit'

url string
isMainFrame boolean

當載入已提交時觸發。這包括當前文件內的導航以及子框架文件級別的載入，但不包括非同步資源載入。

事件: 'did-finish-load'

當導航完成時觸發，即選項卡的載入指示器停止旋轉，並且分發 onload 事件。

事件: 'did-fail-load'

errorCode 整數
errorDescription 字串
validatedURL 字串
isMainFrame boolean

當載入失敗或被取消時觸發此事件，例如呼叫 window.stop()。

事件: 'did-frame-finish-load'

isMainFrame boolean

當框架完成導航時觸發。

事件: 'did-start-loading'

對應於選項卡的載入指示器開始旋轉的時間點。

事件: 'did-stop-loading'

對應於選項卡的載入指示器停止旋轉的時間點。

事件: 'did-attach'

當附加到嵌入器 Web 內容時觸發。

事件: 'dom-ready'

當給定框架中的文件載入時觸發。

事件: 'page-title-updated'

title string
explicitSet boolean

在導航期間設定頁面標題時觸發。當標題從檔案 URL 合成時，explicitSet 為 false。

事件: 'page-favicon-updated'

favicons 字串[] - URL 陣列。

當頁面接收到 favicon 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 string

當用戶或頁面想要開始導航時發出。當 window.location 物件發生更改或使用者單擊頁面中的連結時，可能會發生這種情況。

當使用 <webview>.loadURL 和 <webview>.back 等 API 以程式設計方式啟動導航時，此事件不會發出。

在頁面內導航期間也不會發出，例如單擊錨鏈接或更新 window.location.hash。對於此目的，請使用 did-navigate-in-page 事件。

呼叫 event.preventDefault() 不會產生任何效果。

事件: 'will-frame-navigate'

url string
isMainFrame boolean
frameProcessId 整數
frameRoutingId 整數

當用戶或頁面想要在 <webview> 或其中嵌入的任何框架中的任何位置開始導航時發出。當 window.location 物件發生更改或使用者單擊頁面中的連結時，可能會發生這種情況。

當使用 <webview>.loadURL 和 <webview>.back 等 API 以程式設計方式啟動導航時，此事件不會發出。

在頁面內導航期間也不會發出，例如單擊錨鏈接或更新 window.location.hash。對於此目的，請使用 did-navigate-in-page 事件。

呼叫 event.preventDefault() 不會產生任何效果。

url string
isInPlace 布林值
isMainFrame boolean
frameProcessId 整數
frameRoutingId 整數

當任何框架（包括主框架）開始導航時發出。對於頁面內導航，isInPlace 將為 true。

url string
isInPlace 布林值
isMainFrame boolean
frameProcessId 整數
frameRoutingId 整數

在導航期間發生伺服器端重定向後發出。例如 302 重定向。

事件: 'did-navigate'

url string

當導航完成時發出。

此事件不會為頁面內導航發出，例如單擊錨鏈接或更新 window.location.hash。對於此目的，請使用 did-navigate-in-page 事件。

事件: 'did-frame-navigate'

url string
httpResponseCode 整數 - 非 HTTP 導航為 -1
httpStatusText 字串 - 非 HTTP 導航為空
isMainFrame boolean
frameProcessId 整數
frameRoutingId 整數

當任何框架導航完成時發出。

此事件不會為頁面內導航發出，例如單擊錨鏈接或更新 window.location.hash。對於此目的，請使用 did-navigate-in-page 事件。

事件: 'did-navigate-in-page'

isMainFrame boolean
url string

當發生頁面內導航時發出。

當頁面內導航發生時，頁面 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 string
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'

details RenderProcessGoneDetails

當渲染程序意外消失時觸發。通常是因為它崩潰或被終止了。

事件: 'destroyed'

當 WebContents 被銷燬時觸發。

事件: 'media-started-playing'

當媒體開始播放時發出。

事件: 'media-paused'

當媒體暫停或播放完畢時發出。

事件: 'did-change-theme-color'

themeColor 字串

當頁面主題顏色更改時發出。這通常是由於遇到 meta 標籤

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

事件: 'update-target-url'

url string

當滑鼠懸停在連結上或鍵盤將焦點移動到連結上時發出。

事件: 'devtools-open-url'

url 字串 - 單擊或選擇的連結的 URL。

當在 DevTools 中單擊連結或為其上下文選單中選擇“在新標籤頁中開啟”時發出。

事件: 'devtools-search-query'

event Event
query 字串 - 要查詢的文字。

當為其上下文選單中選擇“搜尋”時發出。

事件: 'devtools-opened'

當 DevTools 開啟時發出。

事件: 'devtools-closed'

當 DevTools 關閉時發出。

事件: 'devtools-focused'

在 DevTools 聚焦/開啟時發出。

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 Rectangle - 表示文件空間中選擇座標的矩形。
- selectionStartOffset 數字 - 選擇文字的起始位置。
- referrerPolicy Referrer - 觸發選單的框架的 referrer policy。
- 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 布林值 - 渲染器是否可以豐富地編輯文字。

當需要處理新的右鍵選單時發出。

警告
啟用
概述
示例
內部實現
CSS 樣式說明
標籤屬性
方法
DOM 事件

警告​

啟用​

概述​

示例​

內部實現​

CSS 樣式說明​

標籤屬性​

src​

nodeintegration​

nodeintegrationinsubframes​

plugins​

preload​

httpreferrer​

useragent​

disablewebsecurity​

partition​

allowpopups​

webpreferences​

enableblinkfeatures​

disableblinkfeatures​

方法​

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

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

<webview>.getURL()​

<webview>.getTitle()​

<webview>.isLoading()​

<webview>.isLoadingMainFrame()​

<webview>.isWaitingForResponse()​

<webview>.stop()​

<webview>.reload()​

<webview>.reloadIgnoringCache()​

<webview>.canGoBack()​

<webview>.canGoForward()​

<webview>.canGoToOffset(offset)​

<webview>.clearHistory()​

<webview>.goBack()​

<webview>.goForward()​

<webview>.goToIndex(index)​

<webview>.goToOffset(offset)​

<webview>.isCrashed()​

<webview>.setUserAgent(userAgent)​

<webview>.getUserAgent()​

<webview>.insertCSS(css)​

<webview>.removeInsertedCSS(key)​

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

<webview>.openDevTools()​

<webview>.closeDevTools()​

<webview>.isDevToolsOpened()​

<webview>.isDevToolsFocused()​

<webview>.inspectElement(x, y)​

<webview>.inspectSharedWorker()​

<webview>.inspectServiceWorker()​

<webview>.setAudioMuted(muted)​

<webview>.isAudioMuted()​

<webview>.isCurrentlyAudible()​

<webview>.undo()​

<webview>.redo()​

<webview>.cut()​

<webview>.copy()​

<webview>.centerSelection()​

<webview>.paste()​

<webview>.pasteAndMatchStyle()​

<webview>.delete()​

<webview>.selectAll()​

<webview>.unselect()​

<webview>.scrollToTop()​

<webview>.scrollToBottom()​

<webview>.adjustSelection(options)​

<webview>.replace(text)​

<webview>.replaceMisspelling(text)​

<webview>.insertText(text)​

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

<webview>.stopFindInPage(action)​

<webview>.print([options])​

<webview>.printToPDF(options)​

<webview>.capturePage([rect])​

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

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

<webview>.sendInputEvent(event)​

<webview>.setZoomFactor(factor)​

警告

啟用

概述

示例

內部實現

CSS 樣式說明

標籤屬性

`src`

`nodeintegration`

`nodeintegrationinsubframes`

`plugins`

`preload`

`httpreferrer`

`useragent`

`disablewebsecurity`

`partition`

`allowpopups`

`webpreferences`

`enableblinkfeatures`

`disableblinkfeatures`

方法

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

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

`<webview>.getURL()`

`<webview>.getTitle()`

`<webview>.isLoading()`

`<webview>.isLoadingMainFrame()`

`<webview>.isWaitingForResponse()`

`<webview>.stop()`

`<webview>.reload()`

`<webview>.reloadIgnoringCache()`

`<webview>.canGoBack()`

`<webview>.canGoForward()`

`<webview>.canGoToOffset(offset)`

`<webview>.clearHistory()`

`<webview>.goBack()`

`<webview>.goForward()`

`<webview>.goToIndex(index)`

`<webview>.goToOffset(offset)`

`<webview>.isCrashed()`

`<webview>.setUserAgent(userAgent)`

`<webview>.getUserAgent()`

`<webview>.insertCSS(css)`

`<webview>.removeInsertedCSS(key)`

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

`<webview>.openDevTools()`

`<webview>.closeDevTools()`

`<webview>.isDevToolsOpened()`

`<webview>.isDevToolsFocused()`

`<webview>.inspectElement(x, y)`

`<webview>.inspectSharedWorker()`

`<webview>.inspectServiceWorker()`

`<webview>.setAudioMuted(muted)`

`<webview>.isAudioMuted()`

`<webview>.isCurrentlyAudible()`

`<webview>.undo()`

`<webview>.redo()`

`<webview>.cut()`

`<webview>.copy()`

`<webview>.centerSelection()`

`<webview>.paste()`

`<webview>.pasteAndMatchStyle()`

`<webview>.delete()`

`<webview>.selectAll()`

`<webview>.unselect()`

`<webview>.scrollToTop()`

`<webview>.scrollToBottom()`

`<webview>.adjustSelection(options)`

`<webview>.replace(text)`

`<webview>.replaceMisspelling(text)`

`<webview>.insertText(text)`

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

`<webview>.stopFindInPage(action)`

`<webview>.print([options])`

`<webview>.printToPDF(options)`

`<webview>.capturePage([rect])`

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

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

`<webview>.sendInputEvent(event)`

`<webview>.setZoomFactor(factor)`