Electron开发笔记----前端小白开发桌面应用之路（四）桌面应用中的跳转
桌面应用中跳转浏览器链接
在桌面应用中，我们打开一个链接，有几种不同的情况
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文件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>childtitle>
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>
允许electron . 打开子窗口后在表单中填写信息发送，发现原页面显示了传递的信息