[TOC] [http://www.hmoore.net/wizardforcel/electron-doc/137786](http://www.hmoore.net/wizardforcel/electron-doc/137786) ## 概述 與`iframe`不同,`webview`和你的應用運行的是不同的進程. 它不擁有渲染進程的權限，并且應用和嵌入內容之間的交互全部都是異步的.因為這能保證應用的安全性不受嵌入內容的影響 ## 標簽 ### src `<webview src="https://www.github.com/"></webview>` 也可填寫 data url `<webview src="data:text/plain,Hello, world!"></webview>` ### autosize 如果這個屬性的值為 "on" ，`webview`容器將會根據屬性`minwidth`,`minheight`,`maxwidth`, 和 `maxheight`的值在它們之間自適應. 只有在`autosize`開啟的時候這個約束才會有效. 當`autosize`開啟的時候，`webview`容器的 size 只能在上面那四個屬性值之間. `<webview src="https://www.github.com/" autosize="on" minwidth="576" minheight="432"></webview> ` ### nodeintegration 可以使用 `require` 與`process` ``` <webview src="http://www.google.com/" nodeintegration></webview> ``` 如果設置了這個屬性，`webview`中的 guest page 將整合node，并且擁有可以使用系統底層的資源，例如`require`和`process`. ### plugins 可使用瀏覽器插件 `<webview src="https://www.github.com/" plugins></webview> ` 如果這個屬性的值為 "on" ，`webview`中的 guest page 就可以使用瀏覽器插件。 ### allowpopups 允許打開新窗口 ## 方法 ### `<webview>.loadURL(url[, options])` * `url`URL * `options`Object (可選) * `httpReferrer`String - 一個http類型的url. * `userAgent`String -用于發起請求的用戶代理. * `extraHeaders`String - 額外的headers,用 "\\n"分隔. 加載 webview 中的`url`，`url`必須包含協議前綴，例如`http://`或`file://` ### `<webview>.getURL()` ### `<webview>.getTitle()` ### `<webview>.isLoading()` ### `<webview>.stop()` 停止渲染 ### `<webview>.reload()` ### `<webview>.goBack()` ### `<webview>.goForward()` ### `<webview>.goToOffset(offset)` 導航到指定位置 ### `<webview>.getUserAgent()` 返回用戶代理的名字 ### `<webview>.setUserAgent(userAgent)` 設置用戶代理 ### `<webview>.openDevTools()` 打開開發工具調試窗口 ## 例子 ### 簡單demo ``` <webview id="foo" src="./子webview.html" style="display:inline-block; width:640px; height:480px"></webview> window.onload=()=>{ const webview = document.querySelector('#foo'); const indicator = document.querySelector('.indicator'); let loadstart = ()=> { indicator.innerText = "loading..."; } let loadstop = ()=> { indicator.innerText = "ok"; } webview.addEventListener("did-start-loading", loadstart); webview.addEventListener("did-stop-loading", loadstop); } ```