3 - Electron app BrowserWindow对象-关于窗口

优雅的打开应用~

当加载缓慢,打开应用的一瞬间会出现白屏,以下方法可以解决

const mainWindow = new BrowserWindow({ show: false })
mainWindow.once('ready-to-show', () => {mainWindow.show()
})

设置背景颜色

const win = new BrowserWindow({ backgroundColor: '#2e2c29' })

定义多窗口

const createWindow = () => {const win = new BrowserWindow({width: 1000,height: 600,});win.loadFile("index.html");const win2 = new BrowserWindow({width: 600,height: 600,});win2.loadURL('https://www.csdn.net/')
};
创建了两个互不相干的窗口

定义父子窗口 

const createWindow = () => {const win = new BrowserWindow({width: 1000,height: 600,});win.loadFile("index.html");const win2 = new BrowserWindow({width: 600,height: 600,parent:win,//父窗口是win});win2.loadURL('https://www.csdn.net/')
};
  • 当不属于父子窗口时,拖动哪个窗口哪个窗口置顶 
  • 当属于父子窗口时,拖动窗口后,子窗口置顶,父窗口在下面 

frame属性

const createWindow = () => {const win = new BrowserWindow({width: 1000,height: 600,frame: false});win.loadFile("index.html");
};
frame:true
frame:false

 当frame:false时

  • 窗口不能拖动
  • 没有标题

用css解决窗口拖动方案

<style>html{height: 100%;user-select: none; //注意:使用这个之后不能使用其他控件、不能选中文本-webkit-app-region:drag;}
</style>

但是这时存在一些小bug,当我们想拖动滑动条时,还是拖拽的窗口。

input{-webkit-app-region:no-drag;
}

在你想拖拽的元素添加no-drag属性,就可以解决啦!

electron-win-state 保存窗口的状态

当用户拖拽窗口大小或位置,关闭应用后不会保留的;如果我们需要保存窗口状态可以试试下面插件

npm i electron-win-state   
const WinState=require('electron-win-state').default; const winState=new WinState({//初始化宽高defaultWidth:800, defaultHeight:600,
})
const createWindow = () => {const win = new BrowserWindow({...winState.winOptions, //在这里定义的宽高位置都要删掉哦!// width: 1000,// height: 600,// x:100,// y:100,backgroundColor:'black',});win.loadFile("index.html");winState.manage(win);//在函数最下方写入
};

require('xxx').default

第一次接触这个有点疑惑,不明白什么意思,举个例子

//导出接口export default function() {}
// 等效于:
function a() {};
export {a as default}; //意思是把a函数导出去

import、require、export、module.exports 混合使用详解_import module.exports-CSDN博客

did-finish-load 外部资源加载完毕,dom-ready DOM加载完毕

const wc = win.webContents;
wc.on("did-finish-load", () => {console.log("外部资源加载完毕");
});
wc.on("dom-ready", () => {console.log("DOM 加载完毕");
});

new-window

<div><a target="_blank" href="https://placekitten.com/500/500"><h3>Kitten</h3></a>
</div>
<script>
wc.on('new-window', (e, url) => {e.preventDefault()console.log('DOM Ready')
})
</script>

context-menu : 右键上下文信息 

只要用户点击右键,我们就可以做一些操作

wc.on('context-menu', (e, params) => {console.log(`Context menu opened on: ${params.mediaType} at x:${params.x}, y:${params.y}`)
})wc.on('context-menu', (e, params) => {console.log(`User seleted text: ${params.selectionText}`)console.log(`Selection can be copied: ${params.editFlags.canCopy}`)
})

executeJavaScript()

往页面中注入js

wc.on('context-menu', (e, params) => {//当我们点击右键时,往页面中注入一段js,表示我们选中的内容wc.executeJavaScript(`alert('${params.selectionText}')`)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/234981.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MongoDB的原子操作findAndReplace、findOneAndDelete和deleteMany

本文主要介绍MongoDB的原子操作findAndReplace、findOneAndDelete和deleteMany。 目录 MongoDB的原子操作一、findAndReplace二、findOneAndDelete三、deleteMany MongoDB的原子操作 MongoDB的原子操作指的是在单个操作中对数据库的数据进行读取和修改&#xff0c;并确保操作是…

selenium css定位

selenium-css定位 element_css driver.find_element(By.CSS_SELECTOR, css表达式)css定位说明 selenium中的css定位&#xff0c;实际是通过css选择器来定位到具体元素&#xff0c;css选择器来自于css语法 css定位优点 语法简洁对比其他定位方式&#xff0c;定位效率更快对…

高防服务器防御靠谱吗?

​  随着互联网的普及和信息技术的不断发展&#xff0c;网络安全问题日益突出。高防服务器作为一种专业的网络安全设备&#xff0c;在防御网络攻击方面扮演着越来越重要的角色。然而&#xff0c;高防服务器是否靠谱&#xff0c;是否能够有效地防御各种网络攻击&#xff0c;一…

CUMT--Java--JDBC编程

目录 一、JDBC简介 二、数据库访问 1、加载数据库驱动 2、建立数据连接 3、创建Statement对象 4、执行SQL语句 5、访问结果集 三、MetaData接口 1、DatabaseMetaData接口 2、ResultSetMetaData接口 四、事务 1、JDBC中的事务 2、保存点 3、批量更新 一、JDBC简…

【JAVA】重力反弹,反弹高次一次比一次低

本来是想实现泡泡屏保(javascript实现漂亮的气泡碰撞效果(Chrome浏览器下更佳) 下载-脚本之家)的&#xff0c;还未实现 import javax.swing.*; import java.awt.*; import java.util.LinkedList; import java.util.Random;class Bubble {public static Image image;public int…

轮滑加盟培训机构管理系统源码开发方案

一、项目背景与目标 &#xff08;一&#xff09;项目背景 随着轮滑运动的普及和市场需求的增加&#xff0c;轮滑加盟培训机构逐渐兴起。这些机构面临着学员管理、课程排班、教师管理等多方面的挑战。为了提高管理效率和服务质量&#xff0c;需要开发一套专门针对轮滑加盟培训…

FormData文件上传多文件上传

一、简介 ​ 通常情况下&#xff0c;前端在使用post请求提交数据的时候&#xff0c;请求都是采用application/json 或 application/x-www-form-urlencoded编码类型&#xff0c;分别是借助JSON字符串来传递参数或者keyvalue格式字符串&#xff08;多参数通过&进行连接&#…

大数据分析22、23真题回忆

2022 学长描述 1. 一个很简单的据估计 2. 算一个决策树 3. Cypher图 4.Hadoop和Spark的区别 2023 真题回忆 1. 大数据分析的定义 说出大数据分析三个层次 2.大数据分析流程 预处理部分包含哪几个步骤 3.Spark核心部件和应用库有哪些 并简要说明功能 4. 主成分分析和因…

HTML5+CSS3小实例:纯CSS实现锚点平滑过渡

实例:纯CSS实现锚点平滑过渡 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"&…

【无语】Microsoft Edge 浏览器不显示后台返回的数值数据

Microsoft Edge 禁用 JSON 视图 写在前面禁用 JSON 视图 写在前面 遇到一个有意思的事情&#xff0c;在用 Microsoft Edge 浏览器发送请求测试时发现&#xff0c;后端返回的数值数据没有正常展示&#xff0c;而是类似查看源码的结果&#xff0c;只显示了一个行号1&#xff0c;…

最优化理论复习--对偶单纯形方法及灵敏度分析

对偶单纯形方法 定义&#xff1a;设 x ( 0 ) x^{(0)} x(0) 是(L)问题的基本解&#xff08;不一定是可行解&#xff08;极点&#xff09;&#xff09;&#xff0c;如果它的对偶问题的解释可行的&#xff0c;则称 x ( 0 ) x^{(0)} x(0) 为原问题的对偶可行基本解 从而衍生出结…

Chappyz 生态迎重磅利好:多链应用程序启动、100% 收入共享计划开启

“首款由人工智能驱动的社区建设工具 Chappyz&#xff0c;即将在 12 月 21 日推出全新的多链平台并向社区开放&#xff0c;同时制定了生态收入 100% 向 Stakers 共享的计划&#xff0c;这不仅是 Chappyz 生态的一个全新进展&#xff0c;也是 Chappyz 生态发展的重磅利好。” 构…

0137 - 跳转控制语句 break、continue、return

文章目录 1 break1.1 基本介绍1.2 基本语法1.3 注意事项和细节说明 2 continue2.1 基本介绍2.2 基本语法 3 return 1 break 1.1 基本介绍 break 语句用于终止某个语句块的执行&#xff0c;一般使用在 switch 或者循环[for , while , do-while]中 1.2 基本语法 { ……break…

新时代体育场馆的未来之路——气膜体育馆

近年来&#xff0c;我国正全面贯彻实施全民健身国家战略&#xff0c;秉持“发展群众体育&#xff0c;服务健康中国”的理念&#xff0c;深入推动群众参与的体育活动&#xff0c;努力实现全民健身与全民健康的深度融合发展。在这一大潮中&#xff0c;体育场馆建设成为业内的一项…

tensorflow入门

一、怎样入手TensorFlow TensorFlow是一个用于机器学习和深度学习的开源框架&#xff0c;它提供了一种灵活的方式来构建和训练神经网络模型。以下是一些TensorFlow框架入门的建议&#xff1a; 学习Python语言&#xff1a;TensorFlow主要使用Python语言进行开发&#xff0c;因此…

欧美电商平台Depop如何入驻?

对标美国二手闲鱼平台Mercia,PoshMark、东南亚Etsy&#xff0c;Depop是英国的一个面向创意人群的二手时尚市场&#xff0c;类似于Instagram&#xff0c;但更专注于买卖二手服装、配饰和艺术品。 有研究显示,由于购物预算减少,高达65%的受访者表示乐意在圣诞节购买或收到二手礼…

JDK bug:ciObjectFactory::create_new_metadata:原因完全解析

文章目录 1、问题2.详细日志2.关键日志3.结论4.JDK&#xff1a;bug最终bug链接&#xff1a; 京东遇到过类似bug各位大佬如果有更详细的解答可以留言。 1、问题 服务不通&#xff0c;接口404&#xff0c;查看日志有一下截图&#xff0c;还有一个更详细的日志 2.详细日志 # #…

cpp_04_类_对象_this指针_常对象_常(成员)函数

1 类 1.1 类的定义 类的作用是抽象事物&#xff08;抽取事物特征&#xff09;的规则。 类的外化表现是用户自定义的复合数据类型&#xff08;包括成员变量、成员函数&#xff09;&#xff1a; 成员变量用于表达事物的属性&#xff0c;成员函数用于表达事物的行为。 类的表现…

智慧食堂餐卡充值文件生成器使用说明

智慧食堂餐卡充值文件生成器 下载地址&#xff1a; https://download.csdn.net/download/boysoft2002/88646277 或者百度网盘下载&#xff1a; https://pan.baidu.com/s/16cxOa5aq0CU0T0xOr2A7-A 操作使用说明 一、文件结构 下载.rar文件后&#xff0c;释放到非系统盘符的…

TensorFlow(2):Windows安装TensorFlow

1 安装python环境 这一步请自行安装&#xff0c;这边不做介绍。 2 安装anaconda 下载路径&#xff1a;Index of /&#xff0c;用户自行选择自己的需要的版本。 3 环境配置 3.1 anaconda环境配置 找到设置&#xff0c;点击系统->系统信息->高级系统设置->环境变量…