Electron学习 第九章嵌入网页

最新推荐文章于 2024-07-23 10:21:19 发布
最新推荐文章于 2024-07-23 10:21:19 发布
阅读量2.3k 收藏 2
点赞数
文章标签： electron 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mm_0123456789/article/details/122717163
版权

electron嵌入网页

文章目录

一、创建项目

1. 创建mian.js

代码如下（示例）：

// main.js
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({
        x:0,
        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">
<head>
    <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>
<body>
    <webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>


</body>
</html>

二、验证代码

1. 运行项目

在这里插入图片描述

梅子酱~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
Electron中嵌套网页
HTongi的博客
02-06 5430
有时候需要在桌面应用程序中嵌套网页，甚至是整个桌面应用程序的主要页面全是嵌套进去的网页，在Electron中，官方文档就给了我们几种不同的方案解决此问题 Iframe 这是H5的一个新标签，可以在网页中，内联一个全新的网页，而在electron中，他也是管用的，使用方式与在普通网页中相差无几 webView 把webView当做是一个容器一般，将外来网页放在容器中显示,但是要是使用，需要在主进程当中，创建窗口时，使用webViewTag设置为true const mainWindow = new B
【Electron】webview 实现网页内嵌
m0_64494670的博客
12-30 2308
Electron内通过 webview标签实现网页内嵌动态切换技术
【electron/cef】-iframe内嵌第三方直接改动顶层窗口href导致的偷梁换柱
qq_58851222的博客
04-30 250
客户端使用cef框架，在自己内部页面中用iframe嵌入第三方游戏广告。
1.1.0 Electron 入门 Hello world
mejian1992的博客
02-03 210
VSCode Atom slack wordpress 项目安装 npm install electron --save-dev 全局安装 npm install -g electron 1.0 Hello World 项目目录 main.js var electron =require('electron') var app=electron.app var BrowserWindow=electron.BrowserWindow// 控制窗口的引用 ...
使用Web前端技术开发桌面应用---Electron中嵌入网页和打开子窗口
CreatorRay的博客
02-23 3807
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 上期内容我们学了如何在浏览器中打开网页，这节我们学习一下如何用BrowserView来嵌入一个网页到我们应用中，这很类似Web中的<iframe>标签。需要注意的是BrowserView是主进程中的类，所以只能在主进程中使用。 在主线程中用BrowserView嵌入网页 打开根目录下打开main.js,直接引入并使用BrowserView就可以实现键入网页到应用中。 var BrowserVie.
electron的webView通信和如何在Electron中使用webView打开网页并获取DOM元素
qq_44984407的博客
02-23 3564
electron的webView通信
用electron做一个浏览器
微小冷的学习笔记
05-04 7740
文章目录iframe输入网址 iframe electron的窗口控件，实际上就是一个html解析工具，也就是说，通过electron可以用最短的代码，写一个浏览器，甚至可以查看浏览器中网页源代码，如下图中点击View->Toggle Developer Tools 代码只需要一个main.js const {app, BrowserWindow} = require('electron') function createWindow () { const mainWindow = new B
使用Electron-BrowserWindow创建桌面应用窗口（续续）
qq_43326668的博客
05-22 463
在本篇博客中，我们介绍了一些实用的Electron-BrowserWindow的功能和技术。这个代码片段创建了两个窗口，一个是主窗口，一个是次要窗口。在前两篇博客中，我们介绍了一些常用和高级的Electron-BrowserWindow的用法和技巧。这个代码片段创建了一个嵌入式Web视图，并将其设置为窗口的内容。这个代码片段将窗口设置为全屏模式。这个代码片段打开了DevTools工具，可以用它来检查和调试窗口中的Web内容。这个代码片段在窗口中处理文件拖放事件，并将拖放的文件输出到控制台。
electron做一个丐版浏览器，只有输入网址显示网页的功能，适合学习
05-04
electron做一个丐版浏览器，只有输入网址显示网页的功能，适合学习 博客：用electron做一个浏览器 博客地址：https://tinycool.blog.csdn.net/article/details/124565497
electron-resource.zip electron学习资源
03-19
1. **入门教程**：这些教程通常以文章或视频的形式，介绍如何设置开发环境，创建第一个Electron应用，以及如何组织和运行代码。它们会解释`main`进程（Node.js进程，负责管理应用程序的生命周期）和`renderer`进程...
前端+将vue项目打包为桌面应用+electron学习
04-15
内容概要:Electron是一个开源的框架，用于构建跨平台的桌面应用程序。它是由GitHub开发的，最初是为了构建...使用人群:学习Electron,将vue项目打包为桌面应用 内容关键词:vue,Electron 用途:将vue项目打包为桌面应用
通过electron打包网页为macos可执行程序
08-18
在这个过程中，"通过electron打包网页为macOS可执行程序"涉及到的主要知识点包括Electron的基本概念、工作原理、打包流程以及在macOS系统上的应用。 1. **Electron基础**： - **Electron简介**：Electron是由...
electron-find:查找网页中文本的所有匹配项
05-05
电子发现 English | 介绍 在电子应用程序中查找文本的...import { remote, ipcRenderer } from 'electron' import { FindInPage } from 'electron-find' # create instance of FindInPage with default config let fin
记录一次使用 electron 套壳桌面端（一）
qq_45219069的博客
09-04 2213
electron 套壳网页端
Electron webview 内网页 与 preload、 渲染进程、主进程的常规通信 以及企业级开发终极简化通信方式汇总
王森的博客
10-17 2357
preload.js 就像插件的 content script 与网页的原生的环境还是隔离的，两个环境的变量互不影响，比如在 preload.js给 window 追加一个函数A，在原生网页中window.A 是 undefined，所以 preload.js 是沙盒环境。实际代码，其中__static就是我们存放静态文件的地方，这个 static 是 electron 源代码根目录下的文件，最终打完包后会放在 dist/electron/ 根目录下。
electron BrowserWindow模块
两个人的幸福online
10-20 647
【代码】electron BrowserWindow模块。
【Electron】Electron开发入门（七）：打开本地文件或者网页链接 and webview里操纵electron api...
weixin_30325971的博客
10-24 2346
1.打开本地文件或者网页链接 // 打开系统本地文件 const {shell} = require(‘electron’); // Open a local file in the default app var path1 = “d:\ProjectsSpace\ElectronProjects\ElectronTest2\app\html\config\r...
electron中加载html,08. Electron 中嵌入网页和打开子窗口
weixin_29505425的博客
05-31 2418
本文我们学习一下如何用BrowserView来嵌入一个网页到我们应用中，这很类似Web中的标签。需要注意的是BrowserView是主进程中的类，所以只能在主进程中使用。在主进程中用BrowserView嵌入网页打开根目录下main.js，直接引入并使用BrowserView就可以实现键入网页到应用中。var BrowserView = electron.BrowserView // 引入Brow...
electron笔记：electron更新版本
最新发布
暮雪的博客
07-23 371
electron更新版本
electron 嵌入网页
03-24
在 Electron 中，可以通过使用 <webview>标签嵌入 web 页面，这个标签与普通的 iframe 标签类似，但是它有更多的功能和 API，可以和主进程进行通信，为用户提供更好的体验。当然，你也可以在窗口中使用其他常见的网页技术，如 iframe 或浏览器能够处理的其他元素。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值