electron 标签webview

最新推荐文章于 2024-05-03 04:00:48 发布

神奇大叔

最新推荐文章于 2024-05-03 04:00:48 发布

阅读量3.4k

点赞数

分类专栏： electron桌面应用文章标签： electron

本文链接：https://blog.csdn.net/weixin_43294560/article/details/105869553

版权

electron桌面应用专栏收录该内容

27 篇文章 5 订阅

订阅专栏

作用:
	将网页内嵌到桌面客户端程序中，可以对引入的网页进行自定义操作,如注入脚本、css等
	
用法:
	在main.js中,webPreferences中添加:webviewTag:true
	<webview src='网页url' />
	
常用事件:
	webview对象.addEventListener('did-start-loading',回调);  网页加载前回调
	wenview对象.addEventListener('did-stop-loading',回调);  网页加载完成后回调

对网页扩展额外脚本
	 <webview src='url' preload='js文件' />

对网页注入css和js
	括号内的字符串由,``反引号阔起来
	
	 webview.insertCSS(`和style中css一样的格式,选择器选择`); css属性可以末尾添加!important增加权重
     webview.executeJavaScript(``);

文档

代码示例:
额外扩展脚本:

setTimeout(function(){
   document.body.style.backgroundColor="red";
},2000)

网页:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>

    <div class='box'>
      <span class='sp'></span>
      //引入
      <webview src='https://www.baidu.com/' preload='./js/webView.js' class='wb' />  
    </div>

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

renderer.js


var view=document.querySelector('.wb');
var sp=document.querySelector('.sp');

view.addEventListener('did-start-loading',function(){
    sp.innerHTML='loading';

})

view.addEventListener('did-stop-loading',function(){
    sp.innerHTML='done';

    view.insertCSS(`
        #su{
            background-color:green !important; 
        }
    `);

    view.executeJavaScript(`
        alert(document.querySelector("#su").value);
    `);

    view.openDevTools();
})

神奇大叔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
electron 标签webview

作用: 将网页内嵌到桌面客户端程序中，可以对引入的网页进行自定义操作,如注入脚本、css等用法: <webview src='网页url' /> 常用事件: webview对象.addEventListener('did-start-loading',回调); 网页加载前回调 wenview对象.addEventListener('did-stop-loading'...
复制链接

扫一扫