作用:
將網頁內嵌到桌面客戶端程序中，可以對引入的網頁進行自定義操作,如注入腳本、css等
用法:
<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(``);
代碼示例:
額外擴展腳本:
setTimeout(function(){
document.body.style.backgroundColor="red";
},2000)
網頁:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<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>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
renderer.js
var view=document.querySelector('.wb');
var sp=document.querySelector('.sp');
view.addEventListener('did-start-loading',function(){
sp.innerHTML='loading';
})
view.addEventListener('did-stop-loading',function(){
sp.innerHTML='done';
view.insertCSS(`
#su{
background-color:green !important;
}
`);
view.executeJavaScript(`
alert(document.querySelector("#su").value);
`);
view.openDevTools();
})