当前位置：网络安全 > 05_webview操作及使用

05_webview操作及使用

发布：2023-10-06 05:10

新建一个文件夹，和之前一样，在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.sychzs.cn() // 单击按钮
        }, 2000) // 延迟 2 秒
    `)
})

最终效果图如下：