Electron DOM webview 标签-木庄网络博客

本文整理自网络，侵删。

使用 webview 标签来把 'guest' 内容（例如 web pages ）嵌入到你的 Electron app 中. guest内容包含在 webview 容器中.一个嵌入你应用的page控制着guest内容如何布局摆放和表达含义.

与 iframe 不同, webview 和你的应用运行的是不同的进程. 它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的.因为这能保证应用的安全性不受嵌入内容的影响.

例子

把一个 web page 嵌入到你的app，首先添加 webview 标签到你的app待嵌入page(展示 guest content). 在一个最简单的 webview 中，它包含了 web page 的文件路径和一个控制 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>

如果想随时控制 guest 内容，可以添加 JavaScript 脚本来监听 webview 事件使用 webview 方法来做出响应. 这里是2个事件监听的例子：一个监听 web page 准备加载，另一个监听 web page 停止加载，并且在加载的时候显示一条 "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>

标签属性

webview 标签有下面一些属性 :

`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>

将一个可用的url做为这个属性的初始值添加到顶部导航.

如果把当前页的src添加进去将加载当前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>

如果这个属性的值为 "on" ， webview 容器将会根据属性minwidth, minheight, maxwidth, 和maxheight 的值在它们之间自适应. 只有在 autosize 开启的时候这个约束才会有效. 当 autosize 开启的时候， webview 容器的 size 只能在上面那四个属性值之间.

`nodeintegration`

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

如果设置了这个属性， webview 中的 guest page 将整合node，并且拥有可以使用系统底层的资源，例如 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>

如果这个属性的值为 "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 中的其他脚本执行之前预加载一个指定的脚本。规定预加载脚本的url须如 file: 或者 asar:，因为它在是 guest page 中通过通过 require 命令加载的。

如果 guest page 没有整合 node ，这个脚本将试图使用真个 Node APIs ，但是在这个脚本执行完毕时，之前由node插入的全局对象会被删除。

`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 设置 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 加载之前为其设置用户代理。如果页面已经加载了，可以使用 setUserAgent 方法来改变用户代理。

`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>

如果这个属性的值为 "on" ， guest page会禁用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设置session。如果初始值为 partition ,这个 page 将会为app中的所有 page 应用同一个持续有效的 session。如果没有 persist: 前缀, 这个 page 将会使用一个历史 session 。通过分配使用相同的 partition, 所有的page都可以分享相同的session。如果 partition 没有设置，那app将使用默认的session.

这个值只能在在第一个渲染进程之前设置修改，之后修改的话会无效并且抛出一个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>

如果这个属性的值为 "on" ，将允许 guest page 打开一个新窗口。

`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>

这个属性的值为一个用逗号分隔的列表，它的值指定特性被启用。你可以从setFeatureEnabledFromString函数找到完整的支持特性。