webview

[TOC] [https://www.kancloud.cn/wizardforcel/electron-doc/137786](https://www.kancloud.cn/wizardforcel/electron-doc/137786) ## 概述 与`iframe`不同,`webview`和你的应用运行的是不同的进程. 它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的.因为这能保证应用的安全性不受嵌入内容的影响 ## 标签 ### src `` 也可填写 data url `` ### autosize 如果这个属性的值为 "on" ，`webview`容器将会根据属性`minwidth`,`minheight`,`maxwidth`, 和 `maxheight`的值在它们之间自适应. 只有在`autosize`开启的时候这个约束才会有效. 当`autosize`开启的时候，`webview`容器的 size 只能在上面那四个属性值之间. ` ` ### nodeintegration 可以使用 `require` 与`process` ``` ``` 如果设置了这个属性，`webview`中的 guest page 将整合node，并且拥有可以使用系统底层的资源，例如`require`和`process`. ### plugins 可使用浏览器插件 ` ` 如果这个属性的值为 "on" ，`webview`中的 guest page 就可以使用浏览器插件。 ### allowpopups 允许打开新窗口 ## 方法 ### `.loadURL(url[, options])` * `url`URL * `options`Object (可选) * `httpReferrer`String - 一个http类型的url. * `userAgent`String -用于发起请求的用户代理. * `extraHeaders`String - 额外的headers,用 "\\n"分隔. 加载 webview 中的`url`，`url`必须包含协议前缀，例如`http://`或`file://` ### `.getURL()` ### `.getTitle()` ### `.isLoading()` ### `.stop()` 停止渲染 ### `.reload()` ### `.goBack()` ### `.goForward()` ### `.goToOffset(offset)` 导航到指定位置 ### `.getUserAgent()` 返回用户代理的名字 ### `.setUserAgent(userAgent)` 设置用户代理 ### `.openDevTools()` 打开开发工具调试窗口 ## 例子 ### 简单demo ``` 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); } ```