webview标签的使用
使用webview标签在页面中打开网站页面
前言
实现效果
一、编写html页面
在 html 页面中引入 webview 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
<webview id = "wv" src = "http://www.baidu.com" style="width: 800px; height: 600px;">
</webview>
<script src="../js/render.js"></script>
</body>
</html>
二、main.js编写
const { app, BrowserWindow } = require('electron');
const path = require('path');
if (require('electron-squirrel-startup')) {
app.quit();
}
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences:{
webviewTag:true
}
});
mainWindow.loadFile(path.join(__dirname, 'index.html'));
mainWindow.webContents.openDevTools();
};
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
三、渲染进程 render.js编写
const webview = document.querySelector("webview")
webview.addEventListener("did-start-loading",()=>{
console.log("正在加载...")
})
webview.addEventListener("did-stop-loading",()=>{
console.log("加载完毕...")
console.log([webview]);
// 修改百度按钮背景颜色为红色
webview.insertCSS(`#su{background:red}`);
webview.executeJavaScript(`
setTimeout(()=>{
let input = document.querySelector("#kw");
input.value = "keyword"; // 搜索框默认关键词
let btn = document.querySelector("#su");
btn.cilck()
},2000);
`)
})
总结
在html页面中引入 webview 标签,在渲染进程中获取到webview标签,并监听该事件