【Electron】webview 实现网页内嵌

实现效果:

当在输入框内输入某个网址后并点击button按钮 , 该网址内容就展示到下面

踩到的坑:之前通过web技术实现 iframe 标签内嵌会出现 同源策略,同时尝试过 vue.config.ts 内配置跨域项 那样确实 是实现啦 但不知道如何动态切换 tagert 的值 

同源策略:

Refused to frame 'https://www.baidu.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://chat.baidu.com http://mirror-chat.baidu.com https://fj-chat.baidu.com https://hba-chat.baidu.com https://hbe-chat.baidu.com https://njjs-chat.baidu.com https://nj-chat.baidu.com https://hna-chat.baidu.com https://hnb-chat.baidu.com http://debug.baidu-int.com".

1. npm init -y //先安装package.json

2.npm install electron 

3.创建main.js

const { app, BrowserWindow } = require('electron')let mainWindowfunction createWindow () {mainWindow = new BrowserWindow({width: 1200,height: 1000,webPreferences: {nodeIntegration: true,webviewTag: true // 启用webview标签}})const menu = Menu.buildFromTemplate([])// 设置菜单栏 =主进程
Menu.setApplicationMenu(menu)mainWindow.loadFile('index.html')mainWindow.on('closed', () => {mainWindow = null})
}app.whenReady().then(createWindow)app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}
})

4.

Menu的作用是去除顶部菜单栏

const { Menu } = require('electron')
const menu = Menu.buildFromTemplate([])// 设置菜单栏 =主进程Menu.setApplicationMenu(menu)

5.如果你在这里使用了 webview 标签 那么你一定要在 webPreferences内添加webviewTag并true ,因为在高版本的electron内 webview标签默认是禁用的状态 

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';"><title>你好!</title>
</head><body><div style="display: flex;"><input type="text" id="urlInput" placeholder="Enter URL" style="width: 100%;"><button id="openUrl">Open URL</button></div><webview id="foo" src="https://www.douyin.com/" httpreferrer="https://www.douyin.com/"style="display:flex; width:100%; height:900px"></webview><script>urlInput = document.getElementById('urlInput')openUrl = document.getElementById('openUrl')foo = document.getElementById('foo')openUrl.addEventListener('click', async () => {foo.setAttribute('src', urlInput.value)})</script></body></html>

启动命令:
npx electron . 

npm install -g electron

electron .

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/587001.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cisco模拟器-交换机端口的隔离

设计要求将某台交换机的端口划分在不同的VLAN。以实现连接在相同VLAN端口上的计算机可以通信&#xff0c;而连接在不同VLAN端口上的计算机无法通信的目的。 通过设计&#xff0c;一方面可以加强计算机网络的安全&#xff0c;另一方面通过隔绝不同VLAN间的广播包也可以提高网络…

GcExcel:DsExcel 7.0 for Java Crack

GcExcel:DsExcel 7.0-高速 Java Excel 电子表格 API 库 Document Solutions for Excel&#xff08;DsExcel&#xff0c;以前称为 GcExcel&#xff09;Java 版允许您在 Java 应用程序中以编程方式创建、编辑、导入和导出 Excel 电子表格。几乎可以部署在任何地方。 创建、加载、…

numpy数组04-数组的轴和读取数据

一、数组的轴 在numpy中数组的轴可以理解为方向&#xff0c;使用0&#xff0c;1&#xff0c;2...数字表示。 对于一个一维数组&#xff0c;只有一个0轴&#xff0c;对于2维数组&#xff08;如shape&#xff08;2&#xff0c;2&#xff09;&#xff09;&#xff0c;有0轴和1轴…

探索 Pinia:简化 Vue 状态管理的新选择(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

go的json数据类型处理

json对象转slice package mainimport ("encoding/json""fmt""github.com/gogf/gf/container/garray" )func main() {// JSON 字符串jsonStr : ["apple", "banana", "orange"]//方法一&#xff1a;// 解析 JSON 字…

visual studio + intel Fortran 错误解决

版本&#xff1a;VS2022 intel Fortran 2024.0.2 Package ID: w_oneAPI_2024.0.2.49896 共遇到三个问题。 1.rc.exe not found 2.kernel32.lib 无法打开 3.winres.h 无法打开 我安装时参考的教程&#xff1a;visual studio和intel oneAPI安装与编写fortran程序_visual st…

【赠书第15期】案例学Python(基础篇)

文章目录 前言 1 简介 2 功能列表 3 实现 3.1 学生类 3.2 学生管理系统类 3.3 使用示例 4 推荐图书 5 粉丝福利 前言 当涉及案例学 Python 时&#xff0c;可以选择一个具体的问题或场景&#xff0c;通过编写代码来解决或模拟这个问题。以下是一个例子&#xff0c;通过…

2024年数据管理预测:利用AI更好地利用非结构化数据

在数据存储和非结构化数据管理领域&#xff0c;过去 12 个月发生了很大变化。在不确定的经济环境下&#xff0c;随着成本上升和 IT 预算压力增加&#xff0c;云存储战略受到关注&#xff0c;生成式 AI 正在创造新的数据存储和治理要求&#xff0c;数据迁移越来越复杂&#xff0…

分库分表之Mycat应用学习二

3 Mycat 概念与配置 官网 http://www.mycat.io/ Mycat 概要介绍 https://github.com/MyCATApache/Mycat-Server 入门指南 https://github.com/MyCATApache/Mycat-doc/tree/master/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%973.1 Mycat 介绍与核心概念 3.1.1 基本介绍 历史&#x…

骑砍战团MOD开发(29)-module_scenes.py游戏场景

骑砍1战团mod开发-场景制作方法_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Cw411N7G4/ 一.骑砍游戏场景 骑砍战团中进入城堡,乡村,战斗地图都被定义为场景,由module_scenes.py进行管理。 scene(游戏场景) 天空盒(Skyboxes.py) 地形(terrain code) 场景物(scene_…

【华为数据之道学习笔记】8-2 数据质量规则

异常数据是不满足数据标准、不符合业务实质的客观存在的数据&#xff0c;如某位员工的国籍信息错误、某位客户的客户名称信息错误等。 数据在底层数据库多数是以二维表格的形式存储&#xff0c;每个数据格存储一个数据值。若想从众多数据中识别出异常数据&#xff0c;就需要通过…

【滑动窗口】C++算法:可见点的最大数目

作者推荐 动态规划 多源路径 字典树 LeetCode2977:转换字符串的最小成本 本题涉及知识点 滑动窗口 LeetCode 1610可见点的最大数目 给你一个点数组 points 和一个表示角度的整数 angle &#xff0c;你的位置是 location &#xff0c;其中 location [posx, posy] 且 point…

C#语言发展历程(1-7)

一、类型发展 C#1中是没有泛型的 在C#2中在逐渐推出泛型。C#2还引入了可空类型。 示例&#xff1a;C#泛型&#xff08;详解&#xff09;-CSDN博客 1 C#3&#xff1a;引入了匿名类型、和隐式的局部变量&#xff08;var&#xff09; 匿名类型&#xff1a;我们主要是使用在LIN…

openGauss学习笔记-179 openGauss 数据库运维-逻辑复制-发布订阅

文章目录 openGauss学习笔记-179 openGauss 数据库运维-逻辑复制-发布订阅179.1 发布179.2 订阅179.3 冲突处理179.4 限制179.5 架构179.6 监控179.7 安全性179.8 配置设置179.9 快速设置 openGauss学习笔记-179 openGauss 数据库运维-逻辑复制-发布订阅 发布和订阅基于逻辑复…

大模型推理部署:LLM 七种推理服务框架总结

自从ChatGPT发布以来&#xff0c;国内外的开源大模型如雨后春笋般成长&#xff0c;但是对于很多企业和个人从头训练预训练模型不太现实&#xff0c;即使微调开源大模型也捉襟见肘&#xff0c;那么直接部署这些开源大模型服务于企业业务将会有很大的前景。 本文将介绍七中主流的…

【eclipse】eclipse开发springboot项目使用入门

下载eclipse Eclipse downloads - Select a mirror | The Eclipse Foundation 安装eclipse 其他一步一步即可 我们是开发java web选择如下 界面修改 Window->Preferences-> 修改eclipse风格主题 Window->Preferences->General->Appearance 修改字体和大小…

基于 CefSharp 实现一个文件小工具

I’m not saying you can’t be financially successful I’m saying have a greater purpose in life well beyond the pursuit of financial success Your soul is screaming for you to answer your true calling You can change today if you redefine what success is to …

深度强化学习DQN训练避障

目录 一.前言 二.代码 2.1完整代码 2.2运行环境 2.3动作空间 2.4奖励函数 2.5状态输入 2.6实验结果 一.前言 深度Q网络&#xff08;DQN&#xff09;是深度强化学习领域的一项革命性技术&#xff0c;它成功地将深度学习的强大感知能力与强化学习的决策能力相结合。在过…

Kafka集群详解

Kafka介绍Kafka集群介绍Kafka集群特点Kafka集群搭建在这里插入图片描述Kafka集群如何进行故障切换Kafka集群Leader的选举Kafka集群如何快速横向拓展Kafka集群搭建最佳实践Kafka集群可以使用单节点Zookeeper吗Kafka集群的消费者信息保存在那里Kafka集群的Topic的分区数的设置规则…

YOLOv8改进 添加可变形注意力机制DAttention

一、Deformable Attention Transformer论文 论文地址&#xff1a;arxiv.org/pdf/2201.00520.pdf 二、Deformable Attention Transformer注意力结构 Deformable Attention Transformer包含可变形注意力机制&#xff0c;允许模型根据输入的内容动态调整注意力权重。在传统的Tra…