如何在Electron Framework中实现类似选项卡的浏览器

本文概述

1.安装Electron标签
2.选项卡的实现

小时候, 我一直想用自己的设计来创建keygen和其他已经存在的怪异程序。那些疯狂的想法之一就是创建只应用于银行交易等的Web浏览器的想法。好吧, 到目前为止, 尽管我还没有创建自己的浏览器引擎, 但是由于有了Electron, 可以使用Web技术轻松实现这一点。选项卡功能还可以通过一个有用的模块来实现, 该模块将帮助你实现选项卡, 而不会弄乱HTML, CSS和JavaScript等本机代码。
在本文中, 我们将向你展示如何实现浏览器(如网站导航标签)。
1.安装Electron标签 electronic-tabs模块是一个非常简单的实用程序, 可让你在相同的Chrome, Brave或任何理智的Web浏览器中为Electron应用程序实现简单的导航选项卡。你将可以使用Electron的Web视图添加新标签。请注意, webview标记的样式使用display：flex; 在内部确保子iframe元素在与传统布局和flexbox布局一起使用时填充其webview容器的整个高度和宽度。请不要覆盖默认显示：flex; CSS属性, 除非指定display：inline-flex; 用于内联布局。
你将能够轻松呈现本地文件或远程网站。要安装此模块, 请在终端上运行以下命令(只要你位于项目目录中)：

npm install --save electron-tabs

安装模块后, 你将可以在渲染器过程中使用它, 我们将在后面解释。有关此模块的更多信息, 请访问Github上的官方存储库。
2.选项卡的实现在项目中呈现选项卡所需的所有标记如下：

< div class="etabs-tabgroup"> < div class="etabs-tabs"> < /div> < div class="etabs-buttons"> < /div> < /div> < div class="etabs-views"> < /div>

但是, 这在应用程序中显示为纯HTML, 这意味着你需要根据需要对其进行样式化。由于是内联html, 它将在你的DOM中占用空间, 因此你在应用程序中使用的逻辑需要更改。你原来的index.html文件现在应该只是带有标签的容器。
以下index.html文件包含漂亮的功能布局, 几乎可以满足应用程序中所有需要标签的所有项目的需要：

< !DOCTYPE html> < html> < head> < meta charset="UTF-8"> < title> Hello World!< /title> < !-- 1. Include CSS that define the styles of the tabs. You can use the default styles of the module or include your own styles. --> < link rel="stylesheet" href="http://www.srcmini.com/node_modules/electron-tabs/electron-tabs.css"> < style> /* As the tab needs to be in the border of the view, remove margin of the body tag */ body{ margin: 0; } < /style> < /head> < body> < !-- 2. Include the basic markup of the tabs view --> < div class="etabs-tabgroup"> < div class="etabs-tabs"> < /div> < div class="etabs-buttons"> < /div> < /div> < div class="etabs-views"> < /div> < !-- 3. Include initialization code, you can include another js file Or write directly the JS code here. --> < script> // You can also require other files to run in this process require('./renderer.js') < /script> < /body> < /html>

如你所见, 标记是非常基本的, 仅包含4个带有某些类的div元素。该逻辑需要使用JavaScript来实现, 但这必须在Renderer进程内完成(通过加载在索引文件中的JS文件或使用脚本标签)。在我们的示例中, 我们在与index.html文件相同的目录中包括一个文件, 即renderer.js, 其中包含以下代码：

// ./renderer.js// 1. Require the module const TabGroup = require("electron-tabs"); // 2. Define the instance of the tab group (container) let tabGroup = new TabGroup({ // If you want a new button that appends a new tab, include: newTab: { title: 'New Tab', // The file will need to be local, probably a local-ntp.html file // like in the Google Chrome Browser.//src: "./some-index-file.html", //visible: true, //webviewAttributes: { //nodeintegration: true //} } }); // 3. Add a tab from a website let tab1 = tabGroup.addTab({ title: "Our Code World", src: "https://ourcodeworld.com", visible: true }); // 4. Add a new tab that contains a local HTML file let tab2 = tabGroup.addTab({ title: "Local File", src: "./local.html", visible: true, // If the page needs to access Node.js modules, be sure to // enable the nodeintegration webviewAttributes: { nodeintegration: true } });

在此示例中, 我们仅包含2个标签。第一步, 你需要创建选项卡组的实例, 该实例将存储选项卡的所有实例。我们的第一个标签会加载一个远程网站, 即ourcodeworld.com, 因此它不需要很多属性, 只需定义网站URL的src属性即可, 但是可以是本地的。例如, 我们的第二个选项卡在你的项目中加载了一个本地文件, 并且使用了nodeintegration(你可以运行具有本机功能的JavaScript)。请注意, 在初始化期间, 可以使用newTab选项添加一个新按钮来加载另一个文件, 通常它应该是一个索引页面, 例如Google Chrome中的一个：