在之前的文章我们介绍了一下Electron的右键菜单的制作，接下来我们继续说一下Electron如何通过链接打开浏览器和嵌入网页。

现在有这样一个需求，我们要在我们的软件中加一个链接，然后点击该链接打开Chrome浏览器来打开此链接，那我们该如何实现呢？

先来看一下上一章之后我们的目录结构：

为了实现上面的需求，我们可以按照之前我们写前端代码一样写一个 a 标签来进行页面的跳转：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hello world</title>

</head>

<body>

<div>

    <a href="https://www.baidu.com" target="_self">点我跳转</a>

    <a href="https://www.baidu.com" target="_blank">点我跳转</a>

</div>

</body>

</html>

我们在 index.html 中写入上述代码，用来进行我们的网页跳转，结果如下：

第一个跳转其实是在自己的窗口跳转到了百度首页，第二个跳转是又单独开了一个窗口跳转到来百度首页，都没有实现我们想要的通过谷歌浏览器跳转页面。

在Electron中为我们提供了跳转到第三方页面的模块 shell，

官方shell模块地址：https://www.electronjs.org/docs/api/shell

我们将index.html改成如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>hello world</title>

 </head>

 <body>

 <div>

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

 </div>

 <script>

     let {shell} = require('electron');

     let aLink = document.getElementById('aLink');

     aLink.onclick = function (e) {

         // 阻止默认事件

         e.preventDefault();

         let aHref = this.getAttribute('href');

         // 通过 shell 打开链接

         shell.openExternal(aHref)

     }

 </script>

 </body>

 </html>

在上面的代码中，我们通过引入shell模块，并根据 shell.openExternal() 方法就能在谷歌浏览器中打开我们的第三方浏览器来，还是比较简单的。

接下来我们再来看一下如何在我们的应用中嵌入第三方网页。

嵌入第三方网页我们可以使用iframe标签来进行嵌入：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hello world</title>

</head>

<body>

<div>

    <iframe src="https://www.baidu.com" frameborder="0" width="500" height="400"></iframe>

</div>

</body>

</html>

我们在index.html中通过iframe标签引入了百度首页，运行一下查看：

从运行结果看还是符合我们的预期的。

在Electron中其实也为我们提供了一个类似与<iframe>的标签 <webview>，

Electron关于 <webview> 官方文档 https://www.electronjs.org/docs/api/webview-tag

但是官方并不建议我们目前使用此标签，具体如下：

Electron的 webview 标签基于 Chromium webview </0>，后者正在经历巨大的架构变化。 这将影响 webview 的稳定性，包括呈现、导航和事件路由。 我们目前建议不使用 webview 标签，并考虑其他替代方案，如 iframe 、Electron的 BrowserView 或完全避免嵌入内容的体系结构。

我试了一下此标签，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>hello world</title>

 </head>

 <body>

 <div>

     <webview src="https://www.baidu.com" style="display:inline-flex; width:640px; height:480px"></webview>

 </div>

 </body>

 </html>

然而运行结果并没有显示出百度三方网站，也没有报错，看来如官方所说目前还不太稳定。于是尝试了推荐的 BrowserView 的方法。

BrowserView 官方地址：https://www.electronjs.org/docs/api/browser-view

BrowserView 存在于主进程， 被用来让 BrowserWindow 嵌入更多的 web 内容。 它就像一个子窗口，除了它的位置是相对于父窗口。 这意味着可以替代webview标签.

由于 BrowserView 存在于主进程中，所以我们需要将其写在index.js 中，如下：

 const {app, BrowserView, BrowserWindow} = require('electron')

 function createWindow() {

     // 创建浏览器窗口

     const win = new BrowserWindow({

         width: 800,

         height: 600,

         webPreferences: {

             nodeIntegration: true

         }

     })

     //引入 menu.js

     require('./menu');

     // 并且为你的应用加载index.html

     win.loadFile('index.html');

     /**

      * 通过 BrowserView 来嵌套三方网站

      * @type {Electron.BrowserView}

      */

     let view = new BrowserView();

     win.setBrowserView(view);

     view.setBounds({ x: 0, y: 0, width: 300, height: 300 });

     view.webContents.loadURL('https://www.baidu.com');

     // 打开开发者工具

     win.webContents.openDevTools()

 }

 // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法

 // 部分 API 在 ready 事件触发后才能使用。

 app.whenReady().then(createWindow)

 //当所有窗口都被关闭后退出

 app.on('window-all-closed', () => {

     // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，

     // 否则绝大部分应用及其菜单栏会保持激活。

     if (process.platform !== 'darwin') {

         app.quit()

     }

 })

 app.on('activate', () => {

     // 在macOS上，当单击dock图标并且没有其他窗口打开时，

     // 通常在应用程序中重新创建一个窗口。

     if (BrowserWindow.getAllWindows().length === 0) {

         createWindow()

     }

 })

 // 您可以把应用程序其他的流程写在在此文件中

 // 代码 也可以拆分成几个文件，然后用 require 导入。

根据官方提供的方法，我们先 new 一个 BrowserView，win.setBrowserView() 方法植入 win 窗口当中，可以根据 view.setBounds() 来设置窗口参数，最后通过view.webContents.loadURL() 来载入要嵌入的三方网站的地址，至此，我们在启动程序时就可以嵌入三方网站了，运行结果如下：

从零开始学Electron笔记（五）的更多相关文章

  1. 从零开始学Electron笔记（四）

    在之前的文章我们介绍了一下Electron的这个remote模块,接下来我们继续说一下Electron的右键菜单的制作. 在我们日常我们使用的软件中都会存在右键菜单的情况,比如我们用到的浏览器,开发所 ...

  2. 从零开始学Electron笔记（一）

    前端技术在最近几年迅猛发展,在任何开发领域我们都能看到前端的身影,从PC端到手机端,从APP到小程序,似乎前端已经无所不能,这就要求我们需要不断地去学习来提升自己!前段时间尤大通过直播介绍了一下Vue ...

  3. 从零开始学Electron笔记（二）

    在之前的文章我们简单介绍了一下Electron可以用WEB语言开发桌面级应用,接下来我们继续说一下Electron的菜单创建和事件绑定. 我们接上一章的代码继续编写,上一章代码 https://www ...

  4. 从零开始学Electron笔记（三）

    在之前的文章我们介绍了一下Electron的菜单创建和事件绑定,其中提到了一个remote模块,接下来我们继续说一下Electron的这个remote模块. 官方关于remote模块的地址:https ...

  5. 从零开始学Electron笔记（六）

    在之前的文章我们介绍了一下Electron如何通过链接打开浏览器和嵌入网页,接下来我们继续说一下Electron中的对话框 Dialog和消息通知 Notification. 在之前的文章中其实我们是 ...

  6. 从零开始学Electron笔记（七）

    在之前的文章我们介绍了一下Electron中的对话框 Dialog和消息通知 Notification,接下来我们继续说一下Electron中的系统快捷键及应用打包. 全局快捷键模块就是 global ...

  7. 从零开始学Xamarin.Forms(五) 技巧

    原文:从零开始学Xamarin.Forms(五) 技巧 由于HTML5规范于2014年10月终于定稿,公司.net开发人员较少,国内外已有了较为成熟的UI框架.手机软件硬件的快速发展等等原因,所以我就 ...

  8. Java从零开始学四十五（Socket编程基础)

    一.网络编程中两个主要的问题 一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输. 在TCP/IP协议中IP层主要负责网络主机的定位,数据传输的路由,由IP地址可 ...

  9. 《Python 3.5从零开始学》笔记-第8章 面向对象编程

    前几章包括开启python之旅.列表和元组.字符串.字典.条件和循环等语句.函数等基本操作.主要对后面几章比较深入的内容记录笔记. 第8章 面向对象编程 8.3深入类 #!/usr/local/bin ...

随机推荐

  1. 检查*.ldf为何这么大

    testdb,只是个测试用文件,备份时突然发现*.ldf怎么这么大,当硬盘不要花银子买啊......--可随意删除...,有空再检查,累了休息... 如批量生成数据.或导入那个来自MySQL的Empl ...

  2. 《Java并发编程的艺术》 第9章 Java中的线程池

    第9章 Java中的线程池 在开发过程中,合理地使用线程池能带来3个好处: 降低资源消耗.通过重复利用已创建的线程 降低线程创建和销毁造成的消耗. 提高响应速度.当任务到达时,任务可以不需要等到线程创 ...

  3. 键盘侠Linux教程（五）| 基本权限管理

    基本权限管理 权限的介绍 权限位的含义 前面讲解ls命令时,我们已经知道长格式显示的第一列就是文件的权限,例如: [root@es ~]# ls -l anaconda-ks.cfg -rw----- ...

  4. opencv C++ Mat构造函数

    cv::Scalar scalar1(v); cv::Mat mat3(size,CV_8UC1,scalar1); std::cout<<mat3<<std::endl; s ...

  5. 查找nginx安装目录并启动

    今天公司突然停电,来电后发现服务无法访问了,服务器是部署在公司内 发现ip ping 不通,是服务器没开 手动开了服务器,还是无法访问 可以FTP,但是不能访问服务,说明机器已经开了,有些东西应该没启 ...

  6. PV、UV、VV、IP的区别

    PV.UV.VV.IP的区别 PV即Page View,网站浏览量 指页面的浏览次数,用于衡量网站用户访问的网页数量.用户每次打开一个页面便记录1次PV,多次打开同一页面则浏览量累计. 一般来说,PV ...

  7. py4j.protocol.Py4JJavaError: An error occurred while calling z:org.apache.spark.api.python.PythonRDD.collectAndServe. : java.lang.IllegalArgumentException: Unsupported class file major version 55

    今天小编用Python编写Spark程序报了如下异常: py4j.protocol.Py4JJavaError: An error occurred while calling z:org.apach ...

  8. 传统声学模型之HMM和GMM

    声学模型是指给定声学符号(音素)的情况下对音频特征建立的模型. 数学表达 用 \(X\) 表示音频特征向量 (观察向量),用 \(S\) 表示音素 (隐藏/内部状态),声学模型表示为 \(P(X|S) ...

  9. html+css快速入门教程（2）

    3 标签 3.1 div div 标签表示一个区块或者区域,你可以把它看成是一个容器,比如说一个 竹篮 作用:用来把网页分块 并且里面可以装任意的html元素 <div>这里是一个div容 ...

  10. MFC 结束线程

    在wtl工程中定义一个现成,如下:DWORD WINAPI ThreadFunc( LPVOID pParam ){if( g_pMainlg )g_pMainlg->DoEnumNetwork ...