Electron中嵌套网页

最新推荐文章于 2024-05-27 16:10:53 发布
最新推荐文章于 2024-05-27 16:10:53 发布
阅读量5.4k 收藏 11
点赞数 1
分类专栏： electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HTongi/article/details/113715598
版权
本文介绍了在Electron桌面应用中嵌套网页的三种方式：Iframe、WebView和BrowserView。Iframe是HTML标签，适用于简单内联网页。WebView更加强大，允许设置多个属性并提供丰富的API，如加载URL、刷新、前进和后退等。BrowserView则允许窗口承载更多web内容，适用于复杂场景。
摘要由CSDN通过智能技术生成

有时候需要在桌面应用程序中嵌套网页，甚至是整个桌面应用程序的主要页面全是嵌套进去的网页，在Electron中，官方文档就给了我们几种不同的方案解决此问题

  • Iframe
    这是H5的一个新标签，可以在网页中，内联一个全新的网页，而在electron中，他也是管用的，使用方式与在普通网页中相差无几
  • webView
    把webView当做是一个容器一般，将外来网页放在容器中显示,但是要是使用，需要在主进程当中，创建窗口时，使用webViewTag设置为true
  const mainWindow = new BrowserWindow({
   
    width: 1000,
    height: 700,
    webPreferences
最低0.47元/天 解锁文章
HTongi
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
electron中加载html,08. Electron 中嵌入网页和打开子窗口
weixin_29505425的博客
05-31 2418
本文我们学习一下如何用BrowserView来嵌入一个网页到我们应用中，这很类似Web中的标签。需要注意的是BrowserView是主进程中的类，所以只能在主进程中使用。在主进程中用BrowserView嵌入网页打开根目录下main.js，直接引入并使用BrowserView就可以实现键入网页到应用中。var BrowserView = electron.BrowserView // 引入Brow...
Electron学习 第九章嵌入网页
mm_0123456789的博客
02-10 2354
electron嵌入网页 文章目录electron嵌入网页一、创建项目1. 创建mian.js2. 创建页面 html二、验证代码1. 运行项目 一、创建项目 1. 创建mian.js 代码如下（示例）： // main.js const electron = require("electron") const app = electron.app const BrowserWindow = electron.BrowserWindow const globalShortcut = electr
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// 控制窗口的引用 ...
electron加载第三方网站到自己项目中
最新发布
weixin_43862642的博客
05-27 404
主要用于加载自己的其他项目页面时用iframe和webview等方法无法操作cookie和localstorage等页面缓存，因此用electron来显示并且实现免密登录，主要是免密登录在不同场景下需要用不同的方法来实现。（1）后台通过请求后台接口或者其他方法获取到对应网站的令牌（能调接口的话尽量不要用selenium的方式，非常不稳定）注意：切记在未获取第三方网站前将别人的网站抓过来显示，容易引发不必要的问题。（2）electron实现免密登录（重点来了）a.通过cookie保存令牌的情况。
electron的webview和内嵌网页如何通信
yezi__6的博客
04-11 1440
由于我使用的是react框架的ref来引用webview组件的，因此需要通过这个引用来获取 webview 的 webContents，进而使用 executeJavaScript 方法。● 与页面交互：你可以使用 executeJavaScript 来注入和执行自定义脚本，从而与网页中的 DOM 进行交互，修改网页内容，或者触发在网页中定义的 JavaScript 函数。webContents 对象提供的一个功能，允许开发者在 web 页面的上下文中运行任意的 JavaScript 代码字符串。
【Electron】webview 实现网页内嵌
m0_64494670的博客
12-30 2306
Electron内通过 webview标签实现网页内嵌动态切换技术
electron的webView通信和如何在Electron中使用webView打开网页并获取DOM元素
qq_44984407的博客
02-23 3559
electron的webView通信
使用Web前端技术开发桌面应用---Electron中嵌入网页和打开子窗口
CreatorRay的博客
02-23 3806
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 上期内容我们学了如何在浏览器中打开网页，这节我们学习一下如何用BrowserView来嵌入一个网页到我们应用中，这很类似Web中的<iframe>标签。需要注意的是BrowserView是主进程中的类，所以只能在主进程中使用。 在主线程中用BrowserView嵌入网页 打开根目录下打开main.js,直接引入并使用BrowserView就可以实现键入网页到应用中。 var BrowserVie.
Electron桌面应用开发
woyebuzhidao321的博客
11-05 4161
https://www.electronjs.org/ 有的时候 样式更新不过来 ctrl + r 调试面板 ctrl + shift + i 一、Electron技术架构 Electron集成了chromium与node.js,将他们整合到一个运行环境中，允许我们使用web技术 html、css、js来构建桌面应用程序，并且能过通过一些与操作系统无关的api 访问windows\macos Chromium：可以理解为浏览器，支持最新特性的浏览器,es6、 Node.js：javascript 运行时
Electron 中文文档
09-03
Electron 中文文档，200多页。排版精美，值得收藏。 --------------------------------------------------- 本 PDF 基于开源文档，目录书签齐全。 版权归原作者，翻译版权归译者。
electron中文手册
02-28
electron.epub electron.mobi electron.pdf electron.chm 四个文件打包,内容是一样的,不过chm文件老是弹窗脚本错误,有点难受,不过内容可以正常看 百度云链接:1Mqqpnfewa5jSHcJaNDXJvg 前边加上:链接：...
electron-find:查找网页中文本的所有匹配项
05-05
在电子应用程序中查找文本的所有匹配项 特征 取决于电子的findInPage的API 支持find界面的用户配置界面 支持区分大小写 用户输入更改时自动查找 查找界面与电子视图分开 支持电子版本^ 1.8.0，^ 2.0.0，^ 3.0.0，^ ...
electron中文教程.pdf
07-06
electron中文教程。 文档内容由网友们编写和整理， 难以确认文档内容知识点是否错漏。 内容包括:向导，教程，api文档，开发和常见问题
Electron 中的 main.js
08-28
Electron的main.js（或者在某些情况下可能是main.ts）是Electron应用程序的入口点。它是创建Electron窗口，设置主进程和创建渲染进程的主要位置。 以下是main.js或类似文件的一些主要功能： 创建窗口： Electron...
Electron开发入门（三）：main process和web page 通信
孟军建的博客
02-21 5170
一、main process 和 web page 通信  electron框架主进程（Main Process）与嵌入的网页（web page，也就是renderer process）之间的通信 Main.js里添加代码 //通信模块，mian process与renderer process（web page） const {ipcMain} = require('electron'
electron提供sdk给远程web页面达到复制图片的功能，web页面提供一个按钮点击后将图片复制到剪切板用户可以直接黏贴
Zq
01-29 546
/* 使用.vue */ <template> <img :src="newSrc" ref="img" /> </template> <script> import { isSupport, copyImgUrl, copyImg } from "@/utils/electronEx"; export default { name: "electronImgCopy", computed: { newSrc(){ .
Electron自定义协议Protocol对web网站做数据交互,使用SSE实时数据推送到网站
斯幽柏雷科技
01-12 2538
Electron对在线网站做数据交互方案,实现在线网站判断Electron调用自定义接口通讯 非IPC通讯,使用自定义协议实现
electron中获取当前网页域名
05-30
在 Electron 中，可以使用 `webContents` 对象中的 `getURL()` 方法获取当前网页的完整 URL，然后使用 JavaScript 中的 `URL` 对象获取域名。 例如，在渲染进程中，可以使用以下代码获取当前网页的域名： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值