05_webview操作和使用

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

职业法师头铁

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

阅读量198

点赞数 1

分类专栏： electron 文章标签： electron

本文链接：https://blog.csdn.net/qq_45475497/article/details/136731890

版权

electron 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

新建一个文件夹，跟之前一样，在 Vscode 终端里输入 yarn create electron-app webview 。

首先也是按照之前的方法去创建 js 和 js 文件夹下的 render.js。

在 index.js 中的 webPreferences 添加：

红框中的代码是 html 支持 webview。webview 其实是嵌入式一个网页，让我们可以进行修改、操作等。

在 index.html 里添加：

<!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="https://www.baidu.com/" style="width:1000px; height:480px"></webview>   <!-- webview其实就是获取网站地址，并设置相应的样式-->
    <script src = "./js/render.js"></script>
  </body>
</html>

效果图如下：

之后在 render.js 添加以下内容：

const webview = document.querySelector('webview');      // 查找文档中符合指定选择器的第一个元素

webview.addEventListener('did-start-loading', () => {
    console.log('正在加载....')
})

webview.addEventListener('did-stop-loading', () => {
    console.log('加载完毕')
    console.log('webview')
    /* 通过调用 insertCSS 方法，可以动态地向 <webview> 插入自定义的样式，以改变页面的外观或布局 */
    webview.insertCSS(`#su{background:pink!important;}`)     // important 设置最高优先级，su是百度一下的id
    webview.executeJavaScript(`     // 用于在 <webview> 元素所加载的页面中执行 JavaScript 代码的函数
        setTimeout(() => {
            let serch = document.querySelector('#kw')
            let bnt = document.querySelector('#su')
            serch.value = "头铁公主"    // 搜索“头铁公主”
            bnt.click() // 点击按钮
        }, 2000)    // 延迟2s
    `)
})

最终效果图如下：

职业法师头铁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05_webview操作和使用

红框中的代码是 html 支持 webview。webview 其实是嵌入式一个网页，让我们可以进行修改、操作等。新建一个文件夹，跟之前一样，在 Vscode 终端里输入。首先也是按照之前的方法去创建 js 和 js 文件夹下的。在 index.js 中的。
复制链接

扫一扫