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

xiaohai 2021-05-13 16:31:13 共16937人围观 标签： 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')
    }
}

相同类型文章

热门标签

每日一句

    自从心中怀有希望，才发现黑暗的背后是无限光明，自从心中有了希望，才发现布满荆棘的羊肠小道，通向的是平坦的大道，自从心中有了希望，才发现原本阴霾的天空其实是如此蔚蓝。

    ——陆奕洁

今日排行

  • Navicat使用HTTP通道

    在使用阿里云RDS中，一般我们出于权限的考虑不会让其他用户直接进行外网访问。所以这里我们就采用Navicat加HTTP通道来访问RDS数据库。

  • 《血色湘西》瞿先生独白

    《血色湘西》瞿先生临死前的独白，振奋人心。

  • Excel如何取排名第几的数据

    Excel如何取最大值、最小值、排名第几的数据，这些都是在我们使用Excel中非常常用的功能。本文主要介绍下这几种函数的使用。

  • 有向图(Digraph)

    有向图根无向图的最大区别在于有向图是具有方向的，所以在实现上也会有很大的不同。

  • 音乐推荐《是妈妈是女儿》

    《是妈妈是女儿》聚焦母女间未曾言明的爱意，以书信对话的形式呈现出各自的内心独白，表达彼此的牵挂。黄绮珊与希林娜依·高用跨越时空、打开心扉、深情对唱的形式，将天下母女爱的寄语化作心灵的倾诉。黄绮珊的每一句话，每一个字都演绎出了妈妈对女儿的爱，而希林依娜·高把女儿对妈妈的爱由不理解到理解再到感恩演绎得淋漓尽致。

点击排行

友情链接