electron|使用Electron的webview组件开发一款无跨域功能的浏览器 webview|vue.js|electron

此浏览器目前无跨域限制，这样是不是可以有很多功能可以想象

文章图片

浏览器下载地址
GitHUb源码
1.Webview空白问题问题描述：
一下代码webview显示为空白页

解决方案

const mainWindow = new BrowserWindow({ webPreferences: { webviewTag: true, } })

2.Webview引入的网页无法正常跳转页面

> export default { data(){ return { webViews: null } }, mounted(){ this.goLink() }, methods:{ async goLink(){ this.webViews = this.$refs.webViews this.webViews.addEventListener('new-window', async (e) => { const { protocol } = require('url').parse(e.url) this.webViews.src = https://www.it610.com/article/e.url // 通过这种方式控制页面跳转 }); } } }

3. 在Vue实例上挂载Electron对象 vue+electron项目，在vue中使用electron的模块出现：Uncaught ReferenceError: __dirname is not defined
解决方案

// vue.config.js module.exports = { pluginOptions: { electronBuilder: { nodeIntegration: true } } }

4.Webview 加载顺序 1.did-start-loading 页面开始加载
2.load-commit 主页面文档加载
3.page-title-updated title
4.dom-ready 主页面 dom 加载完成
【electron|使用Electron的webview组件开发一款无跨域功能的浏览器】5.load-commit frame文档加载
6.did-frame-finish-load frame 加载完成
7.did-frame-finish-load 最后一个是主框架frame 加载完成
8.did-finish-load 页面加载完成
9.page-favicon-updated 网页 icon
10.did-stop-loading 页面停止加载

this.webViews.addEventListener('new-window', async (e) => { const { protocol } = require('url').parse(e.url) }); this.webViews.addEventListener('dom-ready', () => { console.log('主页面 dom 加载完成') // https://www.electronjs.org/zh/docs/latest/api/webview-tag#webviewgeturl let isLoading = this.webViews.isLoading() // 是否加载完成 let getURL = this.webViews.getURL() // 访客页面URL let getTitle = this.webViews.getTitle() // 访客页面标题 console.log(getTitle) // this.webViews.openDevTools() // this.webViews.stop() // 停止 // this.webViews.reload() // 刷新this.webViews.reloadIgnoringCache //刷新并忽略缓存 // this.webViews.canGoBack() // 能否后退 // this.webViews.canGoForward() // 能否前进canGoToOffset(6) // 能否前进到 //this.webViews.clearHistory() // 清楚历史记录})this.webViews.addEventListener('did-start-loading',() => { console.log('页面开始加载') }) this.webViews.addEventListener('load-commit',() => { console.log('主页面文档加载') }) this.webViews.addEventListener('page-title-updated',() => { console.log('page-title-updated') }) this.webViews.addEventListener('load-commit',() => { console.log(' frame文档加载') }) this.webViews.addEventListener('did-frame-finish-load',() => { console.log('frame 加载完成') console.log('最后一个是主框架frame 加载完成') }) this.webViews.addEventListener('did-finish-load ',() => { console.log('最后一个是主框架frame 加载完成') }) this.webViews.addEventListener('page-favicon-updated',() => { console.log(' 网页 icon') }) this.webViews.addEventListener('did-stop-loading',() => { console.log('页面停止加载') })

webView打开控制台

// 左侧 openDevTools({mode:'left'}) // 右侧 openDevTools({mode:'right'}) // 上侧 openDevTools({mode:'top'}) // 下侧 openDevTools({mode:'bottom'}) // 永久分离 openDevTools({mode:'detach'}) // 分离（可以合并） openDevTools({mode:'undocked'})// 关闭控制台 closeDevTools()

复制文本

// 在渲染进程中复制需要设置 nodeIntegration:true const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { webviewTag: true, nodeIntegration: true, contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION } }) // 写入文本 const clipboard = require('electron').clipboard; clipboard.writeText('测试文本');

Electron打包安装依赖

cnpm install -g electron-builder cnpm install -g electron-package

打包

electron-builder

打包常见参数说明

"build": { "appId": "com.example.app", // 应用程序id "productName": "测试", // 应用名称 // 设置为 true 可以把自己的代码合并并加密 "asar": true, "directories": { "buildResources": "build", // 构建资源路径默认为build "output": "dist" // 输出目录默认为dist }, "mac": { "category": "public.app-category.developer-tools", // 应用程序类别 "target": ["dmg", "zip"],// 目标包类型 "icon": "build/icon.icns" // 图标的路径 }, "dmg": { "background": "build/background.tiff or build/background.png", // 背景图像的路径 "title": "标题", "icon": "build/icon.icns" // 图标路径 }, "win": { // 打包成一个独立的 exe 安装程序 // 'target': 'nsis', // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。 // 'arch': [ //'x64', //'ia32' // ] "target": ["nsis","zip"] // 目标包类型 }, "nsis": { // 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer） "oneClick": false, // 允许请求提升。如果为false，则用户必须使用提升的权限重新启动安装程序。 "allowElevation": true, // 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许 "allowToChangeInstallationDirectory": true, // 安装图标 "installerIcon": "build/installerIcon_120.ico", // 卸载图标 "uninstallerIcon": "build/uninstallerIcon_120.ico", // 安装时头部图标 "installerHeaderIcon": "build/installerHeaderIcon_120.ico", // 创建桌面图标 "createDesktopShortcut": true, // 创建开始菜单图标 "createStartMenuShortcut": true, // electron中LICENSE.txt所需要的格式，并非是GBK，或者UTF-8，LICENSE.txt写好之后，需要进行转化，转化为ANSI "license": "LICENSE.txt" },