Electron学习笔记（十）—— 常用api____webview

webview 标签用于集成 'guest（访客）' 内容（比如外部的网页）在你的 Electron 应用内。它们类似于 iframe，但是不同的是每个 webview 运行在独立的进程中。 作为页面它拥有不一样的权限并且所有的嵌入的内容和你应用之间的交互都将是异步的。 这将保证你的应用对于嵌入的内容的安全性。

webview 是 行内元素 

使用webview时，需要做如下配置

因为：
默认情况下，Electron >= 5禁用 webview 标签。
在构造 BrowserWindow 时，
需要通过设置 webviewTag webPreferences选项来启用标签

例子

<span id="loading"></span> 
<webview id="wb" src="https://www.baidu.com/" style="display:flex; width:100%; height:100vh"></webview>

<script>
 let loading = document.querySelector('#loading')
 let wb = document.querySelector('#wb')

 //监听嵌入的页面开始加载
 wb.addEventListener("did-start-loading",()=>{
    loading.innerHTML = "loading..."
  })
 //监听嵌入的页面加载完成
  wb.addEventListener("did-stop-loading",()=>{
    loading.innerHTML = "ok..."
  })
</script>

和普通的iframe有什么区别？ 

与 iframe 不同, webview 在与应用程序不同的进程中运行。它与您的网页没有相同的权限, 应用程序和嵌入内容之间的所有交互都将是异步的。 这将保证你的应用对于嵌入的内容的安全性。 注意: 从宿主页上调用 webview 的方法大多数都需要对主进程进行同步调用。

除此之外，webview标签中还有很多属性

可向引用的页面注入自己的js,还可以通过webview对象的形式注入

 <webview id="wb" src="https://www.baidu.com/" preload="./webview_test/preload.js"></webview>

可向引用的页面注入自己的css

let wb = document.querySelector('#wb')

 wb.addEventListener("did-stop-loading",()=>{
    wb.insertCSS(`#su{background:red}`)
  })

可向引用的页面注入自己的js

let wb = document.querySelector('#wb')

 wb.addEventListener("did-stop-loading",()=>{
    wb.executeJavaScript(`alert(document.getElementById('su').value)`)
  })

打开嵌入页面的控制台

wb.openDevTools()