上期内容我们学了如何在浏览器中打开网页,这节我们学习一下如何用 BrowserView 来嵌入一个网页到我们应用中,这很类似Web中的 <iframe> 标签。需要注意的是 BrowserView 是主进程中的类,所以只能在主进程中使用。

在主线程中用BrowserView嵌入网页

打开根目录下打开 main.js ,直接引入并使用 BrowserView 就可以实现键入网页到应用中。

  var BrowserView = electron.BrowserView; // 引入BrowserView
    var view = new BrowserView();   //new出对象
    mainWindow.setBrowserView(view);    // 在主窗口中设置view可用
    view.setBounds({    //  定义view的具体样式和位置
        x:0,
        y:120,
        width:500,
        height:500
    view.webContents.loadURL('https://blog.csdn.net/m0_46171043?spm=1001.2101.3001.5343');  //view载入的页面

这个使用起来非常简单,写完上面的代码,就可以在终端中输入一下electron .,运行程序,测试一下效果了。

在这里插入图片描述
我view引入的是我CSDN博客的主页,主线程loadFile的还是上期的html页面。
测试的效果就是上面截图的内容,可以成功的把网页嵌入窗口中。

用window.open打开子窗口

我们以前使用过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...