Electron学习第二章

最新推荐文章于 2024-06-06 22:15:29 发布

梅子酱~

最新推荐文章于 2024-06-06 22:15:29 发布

阅读量334

点赞数

文章标签： electron webview javascript

本文链接：https://blog.csdn.net/mm_0123456789/article/details/122712550

版权

webview标签的使用

使用webview标签在页面中打开网站页面

文章目录

webview标签的使用
前言
一、编写html页面
二、main.js编写
三、渲染进程 render.js编写
总结

前言

实现效果
在这里插入图片描述

一、编写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标签，并监听该事件

梅子酱~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron学习第二章

webview标签的使用使用webview标签在页面中打开网站页面文章目录webview标签的使用前言一、编写html页面二、main.js编写三、渲染进程 render.js编写总结前言实现效果一、编写html页面在 html 页面中引入 webview 标签<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Hello World!&l
复制链接

扫一扫