首页 - 信息 - 05_webview操作及使用

05_webview操作及使用

2023-10-06 14:43

  新建一个文件夹,和之前一样,在Vscode终端输入yarn create electro-app webview

   首先按照前面的方法在js和js文件夹下创建render.js

index.js 中的

webPreferences 添加:

  红框中的代码是支持webview的html。 Webview其实就是嵌入在网页中的,可以让我们进行修改、操作等

  添加index.html



  
    
    世界你好!
    
  
  
    

💖世界你好!

欢迎使用您的 Electron 应用程序。

   效果图如下:

1 {IMG_1:Ahr0Chm6ly9pbwcymdizlmnuymxvz3Muy2JSB2CVMJK3MZI1OS8ymdizmDKVMZI1OS0ymdKymja0MZOTI0OTI0OTQZMZU1L nbuzw ==/} 在

   后,在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.insertCSS(`#su{background:pink!important;}`) // important设置最高优先级,su是百度的id
    webview.executeJavaScript(` // 用于在  元素加载的页面中执行 JavaScript 代码的函数
        设置超时(()=> {
            让 serch = document.querySelector('#kw')
            让 bnt = document.querySelector('#su')
            serch.value = "Princess TouTie" // 搜索“Princess TouTie”
            www.gsm-guard.net() // 单击按钮
        }, 2000) // 延迟 2 秒
    `)
})

  最终效果图如下: