electron 标签webview

Dear 丶 2021-07-24 12:34 474阅读 0赞

作用:
    	将网页内嵌到桌面客户端程序中，可以对引入的网页进行自定义操作,如注入脚本、css等
    	
    用法:
    	在main.js中,webPreferences中添加:webviewTag:true
    	<webview src='网页url' />
    	
    常用事件:
    	webview对象.addEventListener('did-start-loading',回调);  网页加载前回调
    	wenview对象.addEventListener('did-stop-loading',回调);  网页加载完成后回调
    
    对网页扩展额外脚本
    	 <webview src='url' preload='js文件' />
    
    对网页注入css和js
    	括号内的字符串由,``反引号阔起来
    	
    	 webview.insertCSS(`和style中css一样的格式,选择器选择`); css属性可以末尾添加!important增加权重
         webview.executeJavaScript(``);

[文档][Link 1]

代码示例:  
额外扩展脚本:

setTimeout(function(){ 
       document.body.style.backgroundColor="red";
    },2000)

网页:

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        
        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
        <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
        <title>Hello World!</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <h1>Hello World!</h1>
    
        <div class='box'>
          <span class='sp'></span>
          //引入
          <webview src='https://www.baidu.com/' preload='./js/webView.js' class='wb' />  
        </div>
    
        
        <script src="./renderer.js"></script>
      </body>
    </html>

renderer.js

[Link 1]: https://www.electronjs.org/docs/api/webview-tag