Electron DOM lt;webviewgt; 标签.pdfVIP

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 ./ style=display :inl 如果想随时控制 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 .//webview 将⼀个可⽤的url做为这个属性的初始值添加到顶部导航. 如果把当前页的src添加进去将加载当前page . src同样可以填 data urls ，例如data:text/plain,Hello, world!. autosize webview src=https://www ./ autosize=on minwidth=57 如果这个属性的值为 on ， webview 容器将会根据属性minwidth, minheight, maxwidth, 和maxheight 的值在它们之间⾃适应. 只有在 autosize 开启的时候这 个约束才会有效. 当 autosize 开启的时候， webview 容器的 size 只能在上⾯那四 个属性值之间. nodeintegration webview src=http://www ./ nodeintegration/webview 如果设置了这个属性， webview 中的 guest page 将整合node ，并且拥有可以使⽤系 统底层的资源，例如 require 和 process . plugins webview src=https://www ./ plugins/webview 如果这个属性的值为 on ， webview 中的 guest page 就可以使⽤浏览器插件。 preload webview src=https://www ./ preload=./test.js/webvi 在 guest page 中的其他脚本执⾏之前预加载⼀个指定的脚本。规定预加载脚本的url须 如 file: 或者 asar:，因为它在是 guest page 中通过通过 require 命令加载的。 如果 guest page 没有整合 node ，这个脚本将试图使⽤真个 Node PIs ，但是在这个脚 本执⾏完毕时，之前由node插⼊的全局对象会被删除。