Electron DOM <webview> 標(biāo)簽

2019-08-14 19:21 更新

使用 webview 標(biāo)簽來(lái)把 'guest' 內(nèi)容（例如 web pages ）嵌入到你的 Electron app 中. guest內(nèi)容包含在 webview 容器中.一個(gè)嵌入你應(yīng)用的page控制著guest內(nèi)容如何布局?jǐn)[放和表達(dá)含義.

與 iframe 不同, webview 和你的應(yīng)用運(yùn)行的是不同的進(jìn)程. 它不擁有渲染進(jìn)程的權(quán)限，并且應(yīng)用和嵌入內(nèi)容之間的交互全部都是異步的.因?yàn)檫@能保證應(yīng)用的安全性不受嵌入內(nèi)容的影響.

例子

把一個(gè) web page 嵌入到你的app，首先添加 webview 標(biāo)簽到你的app待嵌入page(展示 guest content). 在一個(gè)最簡(jiǎn)單的 webview 中，它包含了 web page 的文件路徑和一個(gè)控制 webview 容器展示效果的css樣式:

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

如果想隨時(shí)控制 guest 內(nèi)容，可以添加 JavaScript 腳本來(lái)監(jiān)聽(tīng) webview 事件使用 webview 方法來(lái)做出響應(yīng). 這里是2個(gè)事件監(jiān)聽(tīng)的例子：一個(gè)監(jiān)聽(tīng) web page 準(zhǔn)備加載，另一個(gè)監(jiān)聽(tīng) web page 停止加載，并且在加載的時(shí)候顯示一條 "loading..." 信息:

<script>
  onload = function() {
    var webview = document.getElementById("foo");
    var indicator = document.querySelector(".indicator");

    var loadstart = function() {
      indicator.innerText = "loading...";
    }
    var loadstop = function() {
      indicator.innerText = "";
    }
    webview.addEventListener("did-start-loading", loadstart);
    webview.addEventListener("did-stop-loading", loadstop);
  }
</script>

標(biāo)簽屬性

webview 標(biāo)簽有下面一些屬性 :

src 

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

將一個(gè)可用的url做為這個(gè)屬性的初始值添加到頂部導(dǎo)航.

如果把當(dāng)前頁(yè)的src添加進(jìn)去將加載當(dāng)前page.

src同樣可以填 data urls，例如data:text/plain,Hello, world!.

autosize

<webview src="https://www.github.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  autosize="on" minwidth="576" minheight="432"></webview>

如果這個(gè)屬性的值為 "on" ， webview 容器將會(huì)根據(jù)屬性minwidth, minheight, maxwidth, 和maxheight 的值在它們之間自適應(yīng). 只有在 autosize 開(kāi)啟的時(shí)候這個(gè)約束才會(huì)有效. 當(dāng) autosize 開(kāi)啟的時(shí)候， webview 容器的 size 只能在上面那四個(gè)屬性值之間.

nodeintegration

<webview src="http://www.google.com/" rel="external nofollow"  nodeintegration></webview>

如果設(shè)置了這個(gè)屬性， webview 中的 guest page 將整合node，并且擁有可以使用系統(tǒng)底層的資源，例如 require 和 process .

plugins

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

如果這個(gè)屬性的值為 "on" ， webview 中的 guest page 就可以使用瀏覽器插件。

preload

<webview src="https://www.github.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  preload="./test.js"></webview>

在 guest page 中的其他腳本執(zhí)行之前預(yù)加載一個(gè)指定的腳本。規(guī)定預(yù)加載腳本的url須如 file: 或者 asar:，因?yàn)樗谑?guest page 中通過(guò)通過(guò) require 命令加載的。

如果 guest page 沒(méi)有整合 node ，這個(gè)腳本將試圖使用真?zhèn)€ Node APIs ，但是在這個(gè)腳本執(zhí)行完畢時(shí)，之前由node插入的全局對(duì)象會(huì)被刪除。

httpreferrer

<webview src="https://www.github.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  httpreferrer="http://cheng.guru"></webview>

為 guest page 設(shè)置 referrer URL。

useragent

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

在 guest page 加載之前為其設(shè)置用戶代理。如果頁(yè)面已經(jīng)加載了，可以使用 setUserAgent 方法來(lái)改變用戶代理。

disablewebsecurity

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

如果這個(gè)屬性的值為 "on" ， guest page會(huì)禁用web安全控制.

partition

<webview src="https://github.com" rel="external nofollow"  partition="persist:github"></webview>
<webview src="http://electron.atom.io" rel="external nofollow"  partition="electron"></webview>

為page設(shè)置session。如果初始值為 partition ,這個(gè) page 將會(huì)為app中的所有 page 應(yīng)用同一個(gè)持續(xù)有效的 session。如果沒(méi)有 persist: 前綴, 這個(gè) page 將會(huì)使用一個(gè)歷史 session 。通過(guò)分配使用相同的 partition, 所有的page都可以分享相同的session。如果 partition 沒(méi)有設(shè)置，那app將使用默認(rèn)的session.

這個(gè)值只能在在第一個(gè)渲染進(jìn)程之前設(shè)置修改，之后修改的話會(huì)無(wú)效并且拋出一個(gè)DOM異常.

allowpopups

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

如果這個(gè)屬性的值為 "on" ，將允許 guest page 打開(kāi)一個(gè)新窗口。

blinkfeatures

<webview src="https://www.github.com/" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  blinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>

這個(gè)屬性的值為一個(gè)用逗號(hào)分隔的列表，它的值指定特性被啟用。你可以從setFeatureEnabledFromString函數(shù)找到完整的支持特性。

方法

webview 的方法集合:

注意: webview 元素必須在使用這些方法之前加載完畢。

例如

webview.addEventListener("dom-ready", function() {
  webview.openDevTools();
});

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

  • url URL
  • options Object (可選)
    • httpReferrer String - 一個(gè)http類型的url.
    • userAgent String -用于發(fā)起請(qǐng)求的用戶代理.
    • extraHeaders String - 額外的headers,用 "\n"分隔.

加載 webview 中的 url，url 必須包含協(xié)議前綴，例如 http:// 或 file://.

<webview>.getURL()

從 guest page 中返回 url.

<webview>.getTitle()

從 guest page 中返回 title.

<webview>.isLoading()

返回一個(gè) guest page 是否仍在加載資源的布爾值.

<webview>.isWaitingForResponse()

返回一個(gè) guest page 是否正在等待page的主要資源做出回應(yīng)的布爾值.

<webview>.stop()

停止渲染.

<webview>.reload()

重新加載 guest page.

<webview>.reloadIgnoringCache()

忽視緩存，重新加載 guest page.

<webview>.canGoBack()

返回一個(gè) guest page 是否能夠回退的布爾值.

<webview>.canGoForward()

返回一個(gè) guest page 是否能夠前進(jìn)的布爾值.

<webview>.canGoToOffset(offset)

  • offset Integer

返回一個(gè) guest page 是否能夠前進(jìn)到 offset 的布爾值.

<webview>.clearHistory()

清除導(dǎo)航歷史.

<webview>.goBack()

guest page 回退.

<webview>.goForward()

guest page 前進(jìn).

<webview>.goToIndex(index)

  • index Integer

guest page 導(dǎo)航到指定的絕對(duì)位置.

<webview>.goToOffset(offset)

  • offset Integer

guest page 導(dǎo)航到指定的相對(duì)位置.

<webview>.isCrashed()

返回一個(gè) 渲染進(jìn)程是否崩潰 的布爾值.

<webview>.setUserAgent(userAgent)

  • userAgent String

重新設(shè)置用戶代理.

<webview>.getUserAgent()

返回用戶代理名字，返回類型：String.

<webview>.insertCSS(css)

  • css String

插入css.

<webview>.executeJavaScript(code, userGesture, callback)

  • code String
  • userGesture Boolean - 默認(rèn) false.
  • callback Function (可選) - 回調(diào)函數(shù).
    • result

評(píng)估 code ，如果 userGesture 值為 true ，它將在這個(gè)page里面創(chuàng)建用戶手勢(shì). HTML APIs ，如 requestFullScreen,它需要用戶響應(yīng)，那么將自動(dòng)通過(guò)這個(gè)參數(shù)優(yōu)化.

<webview>.openDevTools()

為 guest page 打開(kāi)開(kāi)發(fā)工具調(diào)試窗口.

<webview>.closeDevTools()

為 guest page 關(guān)閉開(kāi)發(fā)工具調(diào)試窗口.

<webview>.isDevToolsOpened()

返回一個(gè) guest page 是否打開(kāi)了開(kāi)發(fā)工具調(diào)試窗口的布爾值.

<webview>.isDevToolsFocused()

返回一個(gè) guest page 是否聚焦了開(kāi)發(fā)工具調(diào)試窗口的布爾值.

<webview>.inspectElement(x, y)

  • x Integer
  • y Integer

開(kāi)始檢查 guest page 在 (x, y) 位置的元素.

<webview>.inspectServiceWorker()

在 guest page 中為服務(wù)人員打開(kāi)開(kāi)發(fā)工具.

<webview>.setAudioMuted(muted)

  • muted Boolean設(shè)置 guest page 流暢(muted).

<webview>.isAudioMuted()

返回一個(gè) guest page 是否流暢的布爾值.

<webview>.undo()

在page中編輯執(zhí)行 undo 命令.

<webview>.redo()

在page中編輯執(zhí)行 redo 命令.

<webview>.cut()

在page中編輯執(zhí)行 cut 命令.

<webview>.copy()

在page中編輯執(zhí)行 copy 命令.

<webview>.paste()

在page中編輯執(zhí)行 paste 命令.

<webview>.pasteAndMatchStyle()

在page中編輯執(zhí)行 pasteAndMatchStyle 命令.

<webview>.delete()

在page中編輯執(zhí)行 delete 命令.

<webview>.selectAll()

在page中編輯執(zhí)行 selectAll 命令.

<webview>.unselect()

在page中編輯執(zhí)行 unselect 命令.

<webview>.replace(text)

  • text String

在page中編輯執(zhí)行 replace 命令.

<webview>.replaceMisspelling(text)

  • text String

在page中編輯執(zhí)行 replaceMisspelling 命令.

<webview>.insertText(text)

  • text String

插入文本.

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

  • text String - 搜索內(nèi)容,不能為空.
  • options Object (可選)
    • forward Boolean - 向前或向后, 默認(rèn)為 true.
    • findNext Boolean - 是否查找的第一個(gè)結(jié)果,默認(rèn)為 false.
    • matchCase Boolean - 是否區(qū)分大小寫(xiě),默認(rèn)為 false.
    • wordStart Boolean - 是否只查找首字母.默認(rèn)為 false.
    • medialCapitalAsWordStart Boolean - 當(dāng)配合 wordStart的時(shí)候,接受一個(gè)文字中的匹配項(xiàng)，要求匹配項(xiàng)是以大寫(xiě)字母開(kāi)頭后面跟小寫(xiě)字母或者沒(méi)有字母?？梢越邮芤恍┢渌麊卧~內(nèi)部匹配, 默認(rèn)為 false.

發(fā)起一個(gè)請(qǐng)求來(lái)尋找頁(yè)面中的所有匹配 text 的地方并且返回一個(gè) Integer來(lái)表示這個(gè)請(qǐng)求用的請(qǐng)求Id. 這個(gè)請(qǐng)求結(jié)果可以通過(guò)訂閱found-in-page 事件來(lái)取得.

<webview>.stopFindInPage(action)

  • action String - 指定一個(gè)行為來(lái)接替停止<webview>.findInPage 請(qǐng)求.
    • clearSelection - 轉(zhuǎn)變?yōu)橐粋€(gè)普通的 selection.
    • keepSelection - 清除 selection.
    • activateSelection - 聚焦并點(diǎn)擊 selection node.

使用 action 停止 findInPage 請(qǐng)求.

<webview>.print([options])

打印輸出 webview 的 web page. 類似 webContents.print([options]).

<webview>.printToPDF(options, callback)

以pdf格式打印輸出 webview 的 web page. 類似 webContents.printToPDF(options, callback).

<webview>.send(channel[, arg1][, arg2][, ...])

  • channel String
  • arg (可選)

通過(guò) channel 向渲染進(jìn)程發(fā)出異步消息，你也可以發(fā)送任意的參數(shù)。渲染進(jìn)程通過(guò)ipcRenderer 模塊監(jiān)聽(tīng) channel 事件來(lái)控制消息.

例子webContents.send.

<webview>.sendInputEvent(event)

  • event Object

向 page 發(fā)送輸入事件.

查看 webContents.sendInputEvent關(guān)于 event 對(duì)象的相信介紹.

<webview>.getWebContents()

返回和這個(gè) webview 相關(guān)的 WebContents.

DOM 事件

webview 可用下面的 DOM 事件:

Event: 'load-commit'

返回:

  • url String
  • isMainFrame Boolean

加載完成觸發(fā). 這個(gè)包含當(dāng)前文檔的導(dǎo)航和副框架的文檔加載，但是不包含異步資源加載.

Event: 'did-finish-load'

在導(dǎo)航加載完成時(shí)觸發(fā)，也就是tab 的 spinner停止spinning，并且加載事件處理.

Event: 'did-fail-load'

Returns:

  • errorCode Integer
  • errorDescription String
  • validatedURL String

類似 did-finish-load ，在加載失敗或取消是觸發(fā)，例如提出 window.stop().

Event: 'did-frame-finish-load'

返回:

  • isMainFrame Boolean

當(dāng)一個(gè) frame 完成 加載時(shí)觸發(fā).

Event: 'did-start-loading'

開(kāi)始加載時(shí)觸發(fā).

Event: 'did-stop-loading'

停止加載時(shí)觸發(fā).

Event: 'did-get-response-details'

返回:

  • status Boolean
  • newURL String
  • originalURL String
  • httpResponseCode Integer
  • requestMethod String
  • referrer String
  • headers Object

當(dāng)獲得返回詳情的時(shí)候觸發(fā).

status 指示 socket 連接來(lái)下載資源.

Event: 'did-get-redirect-request'

返回:

  • oldURL String
  • newURL String
  • isMainFrame Boolean

當(dāng)重定向請(qǐng)求資源被接收的時(shí)候觸發(fā).

Event: 'dom-ready'

當(dāng)指定的frame文檔加載完畢時(shí)觸發(fā).

Event: 'page-title-updated'

返回:

  • title String
  • explicitSet Boolean

當(dāng)導(dǎo)航中的頁(yè)面title被設(shè)置時(shí)觸發(fā).在title通過(guò)文檔路徑異步加載時(shí)explicitSet為false.

Event: 'page-favicon-updated'

返回:

  • favicons Array - Array of URLs.

當(dāng)page收到了圖標(biāo)url時(shí)觸發(fā).

Event: 'enter-html-full-screen'

當(dāng)通過(guò)HTML API使界面進(jìn)入全屏?xí)r觸發(fā).

Event: 'leave-html-full-screen'

當(dāng)通過(guò)HTML API使界面退出全屏?xí)r觸發(fā).

Event: 'console-message'

返回:

  • level Integer
  • message String
  • line Integer
  • sourceId String

當(dāng)客戶端輸出控制臺(tái)信息的時(shí)候觸發(fā).

下面示例代碼將所有信息輸出到內(nèi)置控制臺(tái)，沒(méi)有考慮到輸出等級(jí)和其他屬性。

webview.addEventListener('console-message', function(e) {
  console.log('Guest page logged a message:', e.message);
});

Event: 'found-in-page'

返回:

  • result Object
    • requestId Integer
    • finalUpdate Boolean - 指明下面是否還有更多的回應(yīng).
    • activeMatchOrdinal Integer (可選) - 活動(dòng)匹配位置
    • matches Integer (optional) - 匹配數(shù)量.
    • selectionArea Object (optional) - 整合第一個(gè)匹配域.

在請(qǐng)求webview.findInPage結(jié)果有效時(shí)觸發(fā).

webview.addEventListener('found-in-page', function(e) {
  if (e.result.finalUpdate)
    webview.stopFindInPage("keepSelection");
});

const rquestId = webview.findInPage("test");

Event: 'new-window'

返回:

  • url String
  • frameName String
  • disposition String - 可以為 default, foreground-tab, background-tab,new-window 和 other.
  • options Object - 參數(shù)應(yīng)該被用作創(chuàng)建新的BrowserWindow.

在 guest page 試圖打開(kāi)一個(gè)新的瀏覽器窗口時(shí)觸發(fā).

下面示例代碼在系統(tǒng)默認(rèn)瀏覽器中打開(kāi)了一個(gè)新的url.

webview.addEventListener('new-window', function(e) {
  require('electron').shell.openExternal(e.url);
});

Event: 'will-navigate'

返回:

  • url String

當(dāng)用戶或page嘗試開(kāi)始導(dǎo)航時(shí)觸發(fā).它能在 window.location 變化或者用戶點(diǎn)擊連接的時(shí)候觸發(fā).

這個(gè)事件在以 APIS 編程方式開(kāi)始導(dǎo)航時(shí)不會(huì)觸發(fā)，例如 <webview>.loadURL 和 <webview>.back.

在頁(yè)面內(nèi)部導(dǎo)航跳轉(zhuǎn)也將不回觸發(fā)這個(gè)事件，例如點(diǎn)擊錨鏈接或更新 window.location.hash.使用 did-navigate-in-page 來(lái)實(shí)現(xiàn)頁(yè)內(nèi)跳轉(zhuǎn)事件.

使用 event.preventDefault() 并不會(huì)起什么用.

Event: 'did-navigate'

返回:

  • url String

當(dāng)導(dǎo)航結(jié)束時(shí)觸發(fā).

在頁(yè)面內(nèi)部導(dǎo)航跳轉(zhuǎn)也將不回觸發(fā)這個(gè)事件，例如點(diǎn)擊錨鏈接或更新 window.location.hash.使用 did-navigate-in-page 來(lái)實(shí)現(xiàn)頁(yè)內(nèi)跳轉(zhuǎn)事件.

Event: 'did-navigate-in-page'

返回:

  • url String

當(dāng)頁(yè)內(nèi)導(dǎo)航發(fā)生時(shí)觸發(fā).當(dāng)業(yè)內(nèi)導(dǎo)航發(fā)生時(shí)，page url改變了，但是不會(huì)跳出 page . 例如在錨鏈接被電擊或DOM hashchange 事件發(fā)生時(shí)觸發(fā).

Event: 'close'

在 guest page試圖關(guān)閉自己的時(shí)候觸發(fā).

下面的示例代碼指示了在客戶端試圖關(guān)閉自己的時(shí)候?qū)⒏淖儗?dǎo)航連接為about:blank.

webview.addEventListener('close', function() {
  webview.src = 'about:blank';
});

Event: 'ipc-message'

返回:

  • channel String
  • args Array

在 guest page 向嵌入頁(yè)發(fā)送一個(gè)異步消息的時(shí)候觸發(fā).

你可以很簡(jiǎn)單的使用 sendToHost 方法和 ipc-message 事件在 guest page 和 嵌入頁(yè)(embedder page)之間通信:

// In embedder page.
webview.addEventListener('ipc-message', function(event) {
  console.log(event.channel);
  // Prints "pong"
});
webview.send('ping');

// In guest page.
var ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('ping', function() {
  ipcRenderer.sendToHost('pong');
});

Event: 'crashed'

在渲染進(jìn)程崩潰的時(shí)候觸發(fā).

Event: 'gpu-crashed'

在GPU進(jìn)程崩潰的時(shí)候觸發(fā).

Event: 'plugin-crashed'

返回:

  • name String
  • version String

在插件進(jìn)程崩潰的時(shí)候觸發(fā).

Event: 'destroyed'

在界面內(nèi)容銷毀的時(shí)候觸發(fā).

Event: 'media-started-playing'

在媒體準(zhǔn)備播放的時(shí)候觸發(fā).

Event: 'media-paused'

在媒體暫停播放或播放放畢的時(shí)候觸發(fā).

Event: 'did-change-theme-color'

在頁(yè)面的主體色改變的時(shí)候觸發(fā). 在使用 meta 標(biāo)簽的時(shí)候這就很常見(jiàn)了:

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

Event: 'devtools-opened'

在開(kāi)發(fā)者工具打開(kāi)的時(shí)候觸發(fā).

Event: 'devtools-closed'

在開(kāi)發(fā)者工具關(guān)閉的時(shí)候觸發(fā).

Event: 'devtools-focused'

在開(kāi)發(fā)者工具獲取焦點(diǎn)的時(shí)候觸發(fā).


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)