`<webview>` 標籤

警告

Electron 的 webview 標籤基於 Chromium 的 webview，後者正在經歷重大的架構變更。這會影響 webviews 的穩定性，包括渲染、導航和事件路由。我們目前建議不要使用 webview 標籤，並考慮替代方案，例如 iframe、WebContentsView，或完全避免嵌入內容的架構。

啟用

預設情況下，webview 標籤在 Electron >= 5 中被禁用。您需要透過在建構 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 元素在使用傳統和 flexbox 佈局時填滿其 webview 容器的完整高度和寬度。請不要覆寫預設的 display:flex; CSS 屬性，除非指定 display:inline-flex; 以進行內聯佈局。

標籤屬性

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 中的訪客頁面將具有 Node 整合，並且可以使用 Node API（如 require 和 process）來存取低階系統資源。預設情況下，在訪客頁面中禁用 Node 整合。

`nodeintegrationinsubframes`

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

一個 boolean，用於在子框架（例如 webview 內的 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 整合時，此腳本仍然可以存取所有 Node API，但在此腳本執行完成後，Node 注入的全域物件將被刪除。

`httpreferrer`

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

一個 string，為訪客頁面設定引用網址。

`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.dev.org.tw" partition="electron"></webview>

一個 string，設定頁面使用的 session。如果 partition 以 persist: 開頭，則頁面將使用持久性 session，該 session 可供應用程式中具有相同 partition 的所有頁面使用。如果沒有 persist: 前綴，則頁面將使用記憶體內 session。透過指定相同的 partition，多個頁面可以共享相同的 session。如果未設定 partition，則將使用應用程式的預設 session。

此值只能在首次導航之前修改，因為活動渲染器程序的 session 無法變更。後續嘗試修改該值將會失敗，並出現 DOM 例外狀況。

`allowpopups`

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

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

`webpreferences`

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

一個 string，它是逗號分隔的字串列表，用於指定要在 webview 上設定的網頁偏好設定。支援的偏好設定字串的完整列表可以在 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 引用網址。
- userAgent string (選用) - 發起請求的使用者代理。
- extraHeaders string (選用) - 以 "\n" 分隔的額外標頭
- postData (UploadRawData | UploadFile)[] (選用)
- baseURLForDataURL string (選用) - 資料 URL 載入的檔案的基本網址（帶有尾隨路徑分隔符）。僅當指定的 url 是資料 URL 且需要載入其他檔案時，才需要此選項。

傳回 Promise<void> - 當頁面完成載入時，promise 將會 resolve（請參閱 did-finish-load），如果頁面載入失敗，則會 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 的金鑰，該金鑰稍後可用於透過 <webview>.removeInsertedCSS(key) 移除 CSS。

將 CSS 注入到當前網頁中，並傳回插入的樣式表的唯一金鑰。

`<webview>.removeInsertedCSS(key)`

key string

傳回 Promise<void> - 如果移除成功，則 resolve。

從當前網頁中移除插入的 CSS。樣式表由其金鑰識別，該金鑰從 <webview>.insertCSS(css) 傳回。

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

code string
userGesture boolean (選用) - 預設 false。

傳回 Promise<any> - 一個 promise，它會 resolve 為已執行程式碼的結果，如果程式碼的結果是被拒絕的 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()`

為訪客頁面中存在的服務 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 Number (選用) - 偏移當前選取範圍的起始索引的量。
- end Number (選用) - 偏移當前選取範圍的結束索引的量。

根據給定的量調整焦點框架中當前文字選取範圍的起點和終點。負數值會將選取範圍移向文件開頭，而正數值會將選取範圍移向文件結尾。

有關範例，請參閱 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 - 焦點並點擊選取節點。

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

`<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 的 Object。

傳回 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 的 Object。預設為 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 模板。應為有效的 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 資料 resolve。

將 webview 的網頁列印成 PDF，與 webContents.printToPDF(options) 相同。

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

rect Rectangle (選用) - 要擷取頁面的區域。

回傳 Promise<NativeImage> - 解析為 NativeImage

擷取 rect 內頁面的快照。省略 rect 將擷取整個可見頁面。

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

channel 字串
...args 任何陣列

傳回 Promise<void>

透過 channel 發送非同步訊息到渲染器程序，您也可以發送任意的參數。渲染器程序可以透過監聽 ipcRenderer 模組的 channel 事件來處理訊息。

請參閱 webContents.send 以取得範例。

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

frameId [number, number] - [processId, frameId]
channel 字串
...args 任何陣列

傳回 Promise<void>

透過 channel 發送非同步訊息到渲染器程序，您也可以發送任意的參數。渲染器程序可以透過監聽 ipcRenderer 模組的 channel 事件來處理訊息。

請參閱 webContents.sendToFrame 以取得範例。

`<webview>.sendInputEvent(event)`

event MouseInputEvent | MouseWheelInputEvent | KeyboardInputEvent

傳回 Promise<void>

發送輸入 event 到頁面。

請參閱 webContents.sendInputEvent 以取得 event 物件的詳細描述。

`<webview>.setZoomFactor(factor)`

factor 數字 - 縮放係數。

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

`<webview>.setZoomLevel(level)`

level 數字 - 縮放等級。

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

注意：Chromium 層級的縮放策略是同源策略，這表示特定網域的縮放等級會在所有具有相同網域的視窗實例之間傳播。區分視窗 URL 將使縮放功能在每個視窗中獨立運作。

`<webview>.getZoomFactor()`

回傳 number - 目前的縮放係數。

`<webview>.getZoomLevel()`

回傳 number - 目前的縮放等級。

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

minimumLevel 數字
maximumLevel 數字

傳回 Promise<void>

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

`<webview>.showDefinitionForSelection()` macOS

顯示彈出字典，搜尋頁面上選取的單字。

`<webview>.getWebContentsId()`

回傳 number - 此 webview 的 WebContents ID。

DOM 事件

以下 DOM 事件適用於 webview 標籤

事件：'load-commit'

回傳

url string
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 contents 時觸發。

事件：'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 Rectangle - 第一個比對區域的座標。
- 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 布林值
frameProcessId 整數
frameRoutingId 整數

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

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

在頁面內導航期間也不會發出此事件，例如點擊錨點連結或更新 window.location.hash。請使用 did-navigate-in-page 事件來達到此目的。

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

回傳

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

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

回傳

url string
isInPlace 布林值
isMainFrame 布林值
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 布林值
frameProcessId 整數
frameRoutingId 整數

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

頁面內導航（例如點擊錨點連結或更新 window.location.hash）不會發出此事件。請使用 did-navigate-in-page 事件來達到此目的。

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

回傳

isMainFrame 布林值
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 字串
args 任何陣列

當訪客頁面已發送非同步訊息到嵌入器頁面時觸發。

透過 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

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

事件：'plugin-crashed'

回傳

name 字串
version 字串

當外掛程序崩潰時觸發。

事件：'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 事件
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 - 調用選單的框架的參照政策。
- 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)`