添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
const electron = require ( "electron" ) const app = electron.app const BrowserWindow = electron.BrowserWindow const globalShortcut = electron.globalShortcut // 声明要打开的窗口 let mainWindow = null app.on ( "ready" , ( ) = > { mainWindow = new BrowserWindow ( { width:800, height:800, webPreferences: { nodeIntegration:true, //开启node接口 contextIsolation:false, webSecurity: false, } ) ; // 打开新窗口 BrosweWindow 初始化 require ( '@electron/remote/main' ) .initialize ( ) ; require ( "@electron/remote/main" ) .enable ( mainWindow.webContents ) ; // 打开调试工具 mainWindow.webContents.openDevTools ( ) ; // mainWindow.loadFile ( "index.html" ) ; mainWindow.loadFile ( "./html/index3.html" ) ; // 在浏览器打开网页 // 嵌入网页 // BrowserView 主线程模块,在主进程中使用 let view = new BrowserView ( ) mainWindow.setBrowserView ( view ) ; view.setBounds ( { y:120, width:400, height:400 view.setBackgroundColor ( "#F5F5F5" ) ; // 当所有窗口被关闭了,退出。 app.on ( 'window-all-closed' , function ( ) { if ( process.platform != 'darwin' ) { app.quit ( ) ; } ) ;

2. 创建页面 html

index.html
代码如下(示例):

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌网页</title>
</head>
    <webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>
</body>
</html>

二、验证代码

1. 运行项目

electron嵌入网页文章目录electron嵌入网页一、创建项目1. 创建mian.js2. 创建页面 html二、验证代码1. 运行项目一、创建项目1. 创建mian.js代码如下(示例):// main.jsconst electron = require("electron")const app = electron.appconst BrowserWindow = electron.BrowserWindowconst globalShortcut = electr 本仓库主要是介绍学些 electron中遇到的一些问题,并提出解决办法,与其他仓库不同的是,这里是以实践为主,并配有详细的注释代码,版本说明 目录结构说明(应用场景篇) lesson-1 初学electron-起步篇-暂未补充 主要讲打印 主要讲主进程与渲染进程通讯 调用动态库示例 electron预览pdf文件的方式 electron打包,源码隐藏、自动更新,覆盖安装, 应用自启动, electron-vue框架升级 electron 禁用按键,快捷键 lesson-8 没想好写什么 检测当前网络环境是在线还是离线 lesson-10 electron结合rem实现多种屏幕应用的适配实战 lesson-11 electron实现注册,登录效果;实现从第三方页面跳回当前的electron应用 lesson-12 electron实现粘贴、复制、剪切,监控剪切板变化, 这是H5的一个新标签,可以在网页中,内联一个全新的网页,而在electron中,他也是管用的,使用方式与在普通网页中相差无几 webView 把webView当做是一个容器一般,将外来网页放在容器中显示,但是要是使用,需要在主进程当中,创建窗口时,使用webViewTag设置为true const mainWindow = new B
文章目录iframe输入网址 iframe electron的窗口控件,实际上就是一个html解析工具,也就是说,通过electron可以用最短的代码,写一个浏览器,甚至可以查看浏览器中网页源代码,如下图中点击View->Toggle Developer Tools 代码只需要一个main.js const {app, BrowserWindow} = require('electron') function createWindow () { const mainWindow = new B
文章目录例子如何让一个网页充满整个窗口 const { app, BrowserWindow, BrowserView, globalShortcut } = require('electron') const path = require('path') var mainWindow = null // 声明要打开的主窗口 const { Menu } = require('electron') app.on('ready', () => { // 设置窗口的高度和宽度 mainWi