Electron页面跳转、浏览器打开链接和打开新窗口

xiaohai 2021-05-13 16:31:13 共13282人围观 标签： Electron 
简介Electron页面跳转、浏览器打开链接和打开新窗口
一、a标签页面跳转

在渲染进程中，如果使用<a>标签可以进行页面跳转，这个跳转只是在当前窗口进行。使用方式如下：

<a href="./test.html">打开新窗口</a>
二、浏览器打开链接

如果我们要通过浏览器打开一个链接，那么可以通过Shell方式进行。首先要给<a>标签绑定一个事件，这里首先给a标签设置id，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1</title>
    <script src="index.js"></script>
</head>
<body>
    <div style='text-align:center;margin-top:109px;'>
        <p><a id="openUrl" href="https://www.baidu.com">浏览器打开新窗口</a></p>
    </div>
</body>
</html>

这里设置了id，并且指定了需要打开的链接地址。

在index.js文件中，我们给上面的标签绑定事件：

var { shell, fs } = require('electron')

window.onload = function () {

    //...其他代码

    var openUrl = document.querySelector('#openUrl')
    openUrl.onclick = function (e) {
        e.preventDefault()
        var href = this.getAttribute('href')
        shell.openExternal(href)
    }
}

运行后就可以在浏览器中打开了。

三、window.open打开窗口

在index.html中添加如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1</title>
    <script src="index.js"></script>
</head>
<body>
    <div style='text-align:center;margin-top:109px;'>
        <p>
            <-- 如下代码 -->
            <button id="openUrl2">Open打开新窗口</button>
        </p>
    </div>
</body>
</html>

在index.js中添加如下代码：

var { shell, fs } = require('electron')

window.onload = function () {
    //其他代码
    var openUrl2 = document.querySelector('#openUrl2')
    openUrl2.onclick = function (e) {
        window.open('https://www.baidu.com')
    }
}

相同类型文章

热门标签

每日一句

    万种思量，多方开解，只恁寂寞厌厌地，系我一生心，负你千行泪。

    ——柳永

今日排行

  • Electron打包错误“Error: Application entry file ..”解决方案

    打包出现如下错误：Error: Application entry file "dist\electron\main.js" in the "D:\gui\demo2\build\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.

  • 数轴上两点间的距离公式及中点公式

    数轴上两点间的距离公式及中点公式

  • 嗨！Tauri

    Tauri 是一个框架，用于为所有主要桌面平台构建小巧、快速的二进制文件。开发人员可以集成任何可编译为 HTML、JS 和 CSS 的前端框架，以构建他们的用户界面。应用程序的后端是一个基于 Rust 的二进制文件，带有一个前端可以与之交互的 API。 Tauri 应用程序的用户界面目前在 macOS 和 Windows 上利用 tao 作为窗口处理库，在 Linux 上通过 Tauri 团队孵化和维护的 WRY 利用 WebKit、Windows 上的 WebView2 和 Linux 上的 WebKitGTK 创建一个统一的系统 webview（和其他好东西，如菜单和任务栏）接口。

  • Flutter开发windows桌面应用处理WebView相关问题

    Flutter开发windows桌面应用处理WebView相关问题

  • Python调用WPS把文档转换PDF，并把PDF转图片

    Python调用WPS把文档转换PDF，并把PDF转图片，首先需要安装WPS，然后利用pypiwin32把文档转化成PDF，再利用fitz、PyMuPD把PDF转化成图片

点击排行

友情链接