[TOC] [https://www.kancloud.cn/wizardforcel/electron-doc/137786](https://www.kancloud.cn/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); } ```