srcmini本文概述
小时候, 我一直想用自己的设计来创建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="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中的一个：
这使用户可以浏览到新页面或某个本地文件。如你所见, 使用Electron Framework创建自己的浏览器非常简单！
编码愉快！
评论前必须登录！
注册