我们以前使用过BrowserWindow
,这个是有区别的,我们通常把window.open
打开的窗口叫做子窗口。 在index3.html
中,加入一个按钮,代码如下:
<button id="myBtn">打开子窗口</button>
然后打开index3.js
,先获取button
的DOM节点,然后监听onclick事件,代码如下:
var mybtn = document.querySelector('#mybtn')
mybtn.onclick = function(e){
window.open('https://blog.csdn.net/m0_46171043?spm=1001.2101.3001.5343')
这样就完成了子窗口的打开。

有微信小程序课设、毕设需求联系个人QQ:505417246
关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢
电子Vue弹簧
一个带有Web前端和Java后端的专用桌面应用程序。
在某些情况下,您可能希望将Java后端用于Electron桌面应用程序。 原因可能是您有一些旧的Java代码要重用,或者想要在Cloud和桌面上运行相同的代码。
该项目有两个子项目:
vue :一个Vue.js应用程序作为前端,基于使用Vue CLI 3创建的HelloWorld项目。您也可以将该项目替换为具有类似设计的React或Angular项目。
spring :一个Spring Boot应用程序作为后端,基于创建的具有Web依赖关系的Maven项目。
Windows和Mac OS均受支持。
注意:此项目使用您的系统Java运行spring Web应用程序。 如果您希望将JRE捆绑到应用程序中,请在创建安装程序时配置Electron Builder的extraFiles以将其复制。
构建最终安装程序,可以在文件夹dist找到它。 这是Windows的exe文件,而Mac是dmg文件。
# install dependencies
npm install
# install depende
有时候需要在桌面应用程序中嵌套网页,甚至是整个桌面应用程序的主要页面全是嵌套进去的网页,在Electron中,官方文档就给了我们几种不同的方案解决此问题
Iframe
这是H5的一个新标签,可以在网页中,内联一个全新的网页,而在electron中,他也是管用的,使用方式与在普通网页中相差无几
webView
把webView当做是一个容器一般,将外来网页放在容器中显示,但是要是使用,需要在主进程当中,创建窗口时,使用webViewTag设置为true
const mainWindow = new B
要创建无边框窗口需要在构造函数中设置frame为false。
在主线程main文件夹index.js里面。
import { BrowserWindow} from 'electron';
const win = new BrowserWindow({ frame: false })
设置自定义拖动区域
要使整个窗口可拖拽,
可以在需要拖拽的元素添加以下样式
-webkit-app-region: drag
如果在窗口的边缘元素添加上面的样式,此时边缘就不能用鼠标对窗口大小进行调节。
整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享部分文档展示:文章篇幅有限,后面的内容就不一一展示了有需要的小伙伴,可以点下方卡片免费领取。
<webview id="geekori" src="https://baidu.com" style="width:400px; height:300px" ></webview>
参考:https://www.cnblogs.com/badaoliumangqizhi/p/12995335.html
在项目过程中我们经常会用到把一个页面嵌入到另外的一个页面当中去 比如以一个模态框的形式去展示 但是这个过程中而且还会涉及到数据的交互 比如在列表的展示页我们希望修改和添加是通过一个页面的弹框的形式去进行 而不是通过直接跳转到一个对应的jsp或者一个html页面 又或者说 我们在项目的过程中对项目进行版本的升级 原有的页面设计就是通过直接跳转到一个jsp和html页面 那么这个时...
点击一个条目,根据获取到的网站 URL 信息,打开网站窗口。
1、修改 Main.vue
在 /src/components/Main.vue 组件里,给每个条目添加双击事件,双击后打开网站窗口,同时注入一段 JS 代码:
<template>
// ...
<div id="items">
// ...
@dblclick="open(item.url, index)"
本方案主要是实现了在两个屏幕显示不同的内容,并根据用户操作,使两个屏幕之间可以通过方法调用(通信),使副屏幕执行相应的操作。
所需的硬件前提条件:双屏,且将双屏的显示方式改为“扩展”;
p.s. 本文使用的electron的版本为1.8.8;如使用新版本进行开发,官方出于安全考虑,默认是开启语境隔离模式的,需要在预加载脚本(preload)部分使用contextBridge进行方法处理。
方案的步骤如下:
在/src/main/index.js文件中,编写增加副屏幕的方法,并在启动的时候,调用此方法
//打开一个子进程
constmyChildProccess=require('child_process');
myChildProccess.spawn('C:\\ProgramFiles\\Notepad++\\notepad++.exe');
npm start 运行看结果,发现notepad++.exe已经被运行起来了
3....
第五讲使用Electron创建原生应用菜单和上下文菜单整体介绍Menu模块的构成静态方法实例方法实例事件MenuItem介绍click函数role参数type参数lable参数sublabel参数tooltipacceleratoriconenabledacceleratorWorksWhenHiddenvisibleBooleancheckedBooleanregisterAcceleratorsharingItemsubmenuidbeforeafterbeforeGroupContainingafte
S弹出一个网页对话框,页面背景全变灰。现将这个页面以iframe内嵌在另一页面中,此时弹出效果为页面只能遮盖住这个iframe,不能遮盖住整个页面。请问有什么解决方案?试了将他放在父窗口中但总是不行,请高手指点.以下为代码,c.html所在的FRAME可以变为灰,但是并不是我想的想个页面变灰,请高手修改:
----------------------a.html:
这里讲一些关于electron中窗口的设置,主要是对原API的解读创建一个新的窗口const BrowserWindow = require('electron').remote.BrowserWindow
const path = require('path')const newWindowBtn = document.getElementById('new-window')newWindowBt
项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签。在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由于center区域是iframe嵌套的,所以里面的小弹窗无法覆盖页面的头部和左边目录栏。
情形一、点击提示弹窗里的确认后,提示弹窗消失:
//warnTips为传入的值,例如successMa...