Electron开发笔记----前端小白开发桌面应用之路（四）桌面应用中的跳转

最新推荐文章于 2024-08-21 11:04:21 发布

前端小黑

最新推荐文章于 2024-08-21 11:04:21 发布

阅读量2.5k

点赞数

分类专栏： Electron JavaScript

本文链接：https://blog.csdn.net/zemprogram/article/details/108030072

版权

JavaScript 同时被 2 个专栏收录

101 篇文章 3 订阅

订阅专栏

Electron

4 篇文章 1 订阅

订阅专栏

桌面应用中跳转浏览器链接

在桌面应用中，我们打开一个链接，有几种不同的情况

1. 直接在应用中跳转到该链接地址

当我们在Electron.js写的桌面应用中写入一个a标签来做跳转时，如下

<a href="https://www.baidu.com">跳转</a>

点击这个跳转时，会发现并不是在浏览器中实现跳转，而是在electron应用中打开了这个页面，如下图
在这里插入图片描述

2. 在浏览器中打开链接地址

我们有时需要通过浏览器去打开一个链接，像vscode里面，就有当我们写的是一个页面的地址时，按住ctrl点击网址就会提示是否在浏览器中打开，点击确定就会在浏览器中打开这个窗口

我们要实现在浏览器中打开，就需要shell模块，通过使用shell模块，我们可以使用默认程序管理文件和url，而这里我们要用到的方法，就是shell模块中的openExternal方法，该方法直接传入一个url，就可以在默认的浏览器中打开对应的链接页面了
这里给a标签一个id

<a id="linkBrowser" href="https://www.baidu.com">跳转</a>

为这个标签绑定对应的事件，因为shell是主进程和渲染进程都可以使用的模块，所以这里直接引入这个模块

const { shell } = require('electron')

window.addEventListener('load', () => {
    window.document.querySelector('#linkBrowser').addEventListener('click', (e) => {
        e.preventDefault() // 阻止跳转的默认行为
        shell.openExternal(e.srcElement.href)
    })
})

引入部分代码所在的文件，就可以实现在浏览器的跳转了

3. 打开一个嵌入页面的应用窗口

如果要在一个桌面应用窗口中嵌入另一个页面，可以通过使用BrowserWindow和BrowserView来实现

因为BorwserWindow和BrowserView都为主进程的模块，所以要在渲染进程中使用时，需要从remote模块中引入

首先在html中添加对应的打开按钮

<a id="openEmbedView" href="https://www.baidu.com">打开嵌入页面的子页面</a>

在渲染进程对应的js文件中添加下面的代码

const { BrowserWindow, BrowserView} = require('electron').remote
window.addEventListener('load', () => {
    window.document.querySelector('#openEmbedView').addEventListener('click', (e) => {
        e.preventDefault()
        let mainWindow = new BrowserWindow({
	        width: 500,
	        height: 500,
	        webPreferences: {
	            nodeIntegration: true
	        }
	    })
	    let view = new BrowserView()
	    mainWindow.setBrowserView(view)
	    view.setBounds({ // 设置嵌入页面的属性
	        x: 0,
	        y: 60,
	        width: 1000,
	        height: 600
	    })
	    view.webContents.loadURL(e.srcElement.href)
	    mainWindow.on('close', () => {
	        mainWindow = null
	    })
    })
})

引入该文件后点击a标签内容，就会打开一个嵌入百度页面的桌面应用窗口

子桌面应用窗口向父桌面应用窗口传递信息

我们现在已经可以打开一个子桌面应用窗口了，如果我们想要从父窗口向子窗口传递信息，我们可以直接在url上添加参数来实现，但如果我们想要从子窗口去向父窗口传递信息呢，我们可以使用postMessage方法结合监听window的message事件来实现

关于postmessage方法的使用，实际上我也在之前的文章跨域问题的解决与具体实现中讲到了，而正因为它是一种跨域的解决方案，所以不管我们打开的页面和当前的页面是否同一个域下，都可以传递信息

但是这种方法，只适用于使用window.open打开的窗口

具体实现见下，首先在首页添加打开子窗口的跳转以及接收展示内容的p标签

<a id="openChild" href="child.html">打开子窗口</a>
<p id="msgShow"></p>

在JavaScript中添加相应的监听事件

window.document.querySelector('#openChild').addEventListener('click', (e) => {
    e.preventDefault()
    window.open(e.srcElement.href)
})
window.addEventListener('message', msg => {
	// msg为一个对象，这里的值存储在data中，所以取data来赋值
    window.document.querySelector('#msgShow').innerHTML = msg.data
})

新建一个child.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>child</title>
</head>

<body>
    <h1>这是一个子窗口</h1>
    <button id="sendMsg">传递信息</button>
    <input type="text" id="sendInput">
    <script>
        let sendInput = window.document.querySelector('#sendInput')
        window.document.querySelector('#sendMsg').addEventListener('click', (e) => {
            window.opener.postMessage(sendInput.value)
        })
    </script>
</body>

</html>