electron开发跨多平台Mac、Windows 和 Linux的桌面应用之webview标签（四）

程序员文章站 2022-04-26 18:36:44

...

参考文档：https://electronjs.org/docs/api/webview-tag.

1. 在一些旧的eletron版本的中需要在主进程中引入webviewTag=true属性，才会显示webview标签。

win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      webviewTag:true,  //在一些旧的eletron版本的中需要在主进程中引入该属性，才会显示webview标签。
      nodeIntegration: true
    }
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>electron 的webview标签</title>
    <style>
      #webviewClass{
        width: 800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
      <!-- webview的preload可以嵌入脚本 也可对webview的src的网页的标签进行dom操作-->
      <webview src='https://www.baidu.com' id="webviewClass" preload='./index.js'></webview> 
  </body>
  <script>
    const webviewClass=document.getElementById("webviewClass");
    webviewClass.addEventListener("did-start-loading",()=>{
      console.log('webview开始加载')
    })
    webviewClass.addEventListener("did-stop-loading",()=>{
      console.log('webview加载完成')
      webviewClass.insertCss(`  //加载重写css样式
        .flex_color{
          color:red
        }
      `)
    })
  </script>
</html>

electron开发跨多平台Mac、Windows 和 Linux的桌面应用之webview标签（四）