Electron中通过shell模块打开链接地址

aiguangyuan

已于 2024-08-08 15:42:31 修改

阅读量2.8k

点赞数 1

分类专栏： Electron 文章标签：桌面端开发 Electron

于 2021-04-19 22:12:23 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/115875751

版权

Electron 专栏收录该内容

18 篇文章 20 订阅

订阅专栏

1. 在外部浏览器中打开外部链接

var {shell}=require('electron')

shell.openExternal('https://github.com');

2. 在内部iframe中打开外部链接

Electron5.x 之后官方不建议使用 webview 标签，可以使用 iframe 替代 webview，代码如下：

<iframe id="myWebview" name="myWebview" style="width:100%;height:400px;"></iframe>

以下是javascript代码。

var myWebview = document.getElementById("myWebview");
myWebview.src = "http://www.baidu.com";

3. 代码实例

首先是主进程main.js文件代码：

// main.js
const { app, BrowserWindow } = require("electron");
const path = require("path");


const createWindow = () => {
    // 创建窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // 开启node
            nodeIntegration: true,
            // 取消上下文隔离
            contextIsolation: false,
            // 开启remote
            enableRemoteModule:true,
        }
    });
    // 加载本地文件
    mainWindow.loadFile(path.join(__dirname, "index.html"));
    // 加载远程地址
    // mainWindow.loadURL('https://github.com');

    // 开启调试模式
    mainWindow.webContents.openDevTools();

    // 引入主进程的通信
    require('./ipcMain/ipcMain.js');

}

// 监听应用的启动事件
app.on("ready", createWindow);

// 兼容MacOS系统的窗口关闭功能
app.on("window-all-closed", () => {
    // 非MacOS直接退出
    if (process.platform != "darwin") {
        app.quit();
    }
});

// 点击MacOS底部菜单时重新启动窗口
app.on("activate", () => {
    if (BrowserWindow.getAllWindows.length == 0) {
        createWindow();
    }
})

以下是在主进程main.js文件中引入的ipcMain.js文件代码：

const {Menu,BrowserWindow,shell} = require("electron");
 
var menuTemplate=[
    {
        label:"帮助",
        submenu:[
            {
                label:"在线帮助",click:()=>{
                    // 在外部浏览器中打开链接地址
                    shell.openExternal("http://www.baidu.com");
                }
            },
            {
                label:"关于我们",click:()=>{
                    var url = "http://www.qq.com";
                    // 传递消息给渲染进程index,在iframe中打开外部链接
                    BrowserWindow.getFocusedWindow().webContents.send("openIframe",url)
                }
            }
        ]
    }
];
// 固定写法
var menuBuilder = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menuBuilder);

以下是渲染进程index.html文件的代码：

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

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

    <p>Electron中shell模块的使用</p>
    <p>
        <a href="http://www.baidu.com" target="myWebview">
            打开百度
        </a>
    </p>
    <p >
        <a href="http://www.qq.com" target="myWebview">
            打开腾讯
        </a>
    </p>
    <iframe id="myWebview" name="myWebview" style="width:100%;height:400px;">
    </iframe>
    <script src="./ipcRenderer/index.js"></script>
</body>
</html>

以下是渲染进程index.html中引入的index.js文件代码：

// index.js
const {shell,ipcRenderer}=require("electron");

window.onload = () => {
    var list = document.querySelectorAll('a');
    for(var i=0;i<list.length;i++){
        var obj= list[i];
        obj.onclick = (e)=>{
            e.preventDefault();
            var href = obj.getAttribute("href");

            // 在外部浏览器中打开链接
            shell.openExternal(href);
            
            // 打开指定的文件夹，字符需要转义
            // shell.showItemInFolder("D:\\electron");
        }
    }
};

// 监听主进程ipcMain传递的消息，在iframe中打开外部链接
ipcRenderer.on("openIframe",(e,url)=>{
    var myWebview = document.getElementById("myWebview");
    myWebview.src = url;
})

实现效果如下：