当前位置:网站首页>Modules that can be used by both the electron main process and the rendering process
Modules that can be used by both the electron main process and the rendering process
2022-07-06 22:56:00 【Follow the road to the end】
shell modular
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>shell And iframe</h2>
<a id="openUrl" href="https://kaiwu.lagou.com/"> open URL</a>
<br><br>
<button id="openFolder"> Open Directory </button>
<script src="index.js"></script>
</body>
</html>
index.js
const { shell } = require('electron')
const path = require('path')
window.addEventListener('DOMContentLoaded', () => {
const oBtn1 = document.getElementById('openUrl')
const oBtn2 = document.getElementById('openFolder')
oBtn1.addEventListener('click', (e) => {
e.preventDefault()
const urlPath = oBtn1.getAttribute('href')
shell.openExternal(urlPath) // Open the link using the default browser
})
oBtn2.addEventListener('click', () => {
shell.showItemInFolder(path.resolve(__filename))
})
})
iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
}
</style>
</head>
<body>
<h2>shell And iframe</h2>
<iframe src="https://kaiwu.lagou.com/" frameborder="0" id="webview"></iframe>
<script src="index.js"></script>
</body>
</html>
Customize menu usage shell
main.js
const { app, BrowserWindow, Menu, shell } = require('electron')
console.log(process.platform)
// Define global variables to store in the main window id
let mainWinId = null
// create a window
function createWindow () {
console.log('ready')
// Create the main process
const mainWin = new BrowserWindow({
title: ' Custom menu ',
show: false, // true: Display Form ,false: Don't show forms
width: 800,
height: 400,
webPreferences: {
nodeIntegration: true, // Allow browser environments to use Node API
enableRemoteModule: true, // Allow pages to use remote
}
})
let tmp = [
{
label: ' menu ',
submenu: [
{
label: ' About ',
click() {
shell.openExternal('https://kaiwu.lagou.com/')
}
},
{
label: ' open ',
click() {
BrowserWindow.getFocusedWindow().webContents.send('openUrl')
}
},
]
}
]
let menu = Menu.buildFromTemplate(tmp)
Menu.setApplicationMenu(menu)
// Load the specified interface in the current window and let it display the specific content
mainWin.loadFile('index.html')
mainWinId = mainWin.id
mainWin.on('ready-to-show', () => {
mainWin.show() // After the form is fully loaded , Display Form , Avoid white pages
})
mainWin.on('close', () => {
console.log('close')
//mainWin = null
})
}
// When app After starting , Perform window creation and other operations
app.on('ready', createWindow)
app.on('window-all-closed', () => {
console.log('window-all-closed')
app.quit()
})
Notice of news
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h2> be based on H5 Implement message notification </h2>
<button id="btn"> Trigger message </button>
<script src="index.js"></script>
</body>
</html>
index.js
window.addEventListener('DOMContentLoaded', () => {
const oBtn = document.getElementById('btn')
oBtn.addEventListener('click', () => {
const option = {
title: ' Notification message 123',
body: ' The message content abc',
icon: './msg.png',
}
const myNotification = new window.Notification(option.title ,option)
myNotification.onclick = function() {
console.log(' Click on the message page card ')
}
})
})
1
Shortcut key registration
main.js
const { app, BrowserWindow, globalShortcut } = require('electron')
console.log(process.platform)
// Define global variables to store in the main window id
let mainWinId = null
// create a window
function createWindow () {
console.log('ready')
// Create the main process
const mainWin = new BrowserWindow({
title: ' Custom menu ',
show: false, // true: Display Form ,false: Don't show forms
width: 800,
height: 400,
webPreferences: {
nodeIntegration: true, // Allow browser environments to use Node API
enableRemoteModule: true, // Allow pages to use remote
}
})
// Load the specified interface in the current window and let it display the specific content
mainWin.loadFile('index.html')
mainWinId = mainWin.id
mainWin.on('ready-to-show', () => {
mainWin.show() // After the form is fully loaded , Display Form , Avoid white pages
})
mainWin.on('close', () => {
console.log('close')
//mainWin = null
})
}
// When app After starting , Perform window creation and other operations
app.on('ready', createWindow)
// Register shortcuts
app.on('ready', () => {
const ret = globalShortcut.register('ctrl + q', () => {
console.log(' Shortcut key registration ')
})
if (!ret) {
console.log(' Registration failed ')
}
console.log(globalShortcut.isRegistered('ctrl + q'))
console.log(ret)
})
app.on('will-quit', () => {
// Shortcut key to cancel registration
globalShortcut.unregister('ctrl + q')
// Cancel all registered shortcuts
globalShortcut.registerAll()
})
app.on('window-all-closed', () => {
console.log('window-all-closed')
app.quit()
})
Shear board module
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<h2> Clippings </h2>
<input type="text" placeholder=" Enter the content to be copied "> <button> Copy </button>
<br><br>
<input type="text" placeholder=" Paste the content here "> <button> Paste </button>
<br><br>
<button id='clipImg'> Copy the picture to the cutout and paste it into the interface </button>
<br><br>
<script src="index.js"></script>
</body>
</html>
index.js
const { clipboard, nativeImage } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
const aBtn = document.getElementsByTagName('button')
const aInput = document.getElementsByTagName('input')
const oBtn = document.getElementById('clipImg')
let ret = null
aBtn[0].addEventListener('click', () => {
// Copy content to clipboard
ret = clipboard.writeText(aInput[0].value)
})
aBtn[1].addEventListener('click', () => {
// Paste the contents of the clipboard
aInput[1].value = clipboard.readText(ret)
})
oBtn.addEventListener('click', () => {
// When placing the picture in the clipboard, it is required that the picture type belongs to nativeImage example
const oImage = nativeImage.createFromPath('./msg.png')
clipboard.writeImage(oImage)
// Make the picture in the clipboard as DOM Elements are displayed on the interface
const oImg = clipboard.readImage()
const oImgDom = new Image()
oImgDom.src = oImg.toDataURL()
document.body.append(oImgDom)
})
})
1
边栏推荐
- Designed for decision tree, the National University of Singapore and Tsinghua University jointly proposed a fast and safe federal learning system
- Return keyword
- Improving Multimodal Accuracy Through Modality Pre-training and Attention
- Detailed explanation of ThreadLocal
- 基于PaddlePaddle平台(EasyDL)设计的人脸识别课堂考勤系统
- Rust knowledge mind map XMIND
- Jafka source analysis processor
- What are the specific steps and schedule of IELTS speaking?
- 石墨文档:4大对策解决企业文件信息安全问题
- Use ECs to set up an agent
猜你喜欢
金融人士必读书籍系列之六:权益投资(基于cfa考试内容大纲和框架)
CSDN 上传图片取消自动加水印的方法
Matlab tips (27) grey prediction
Let's see through the network i/o model from beginning to end
案例推荐丨安擎携手伙伴,保障“智慧法院”更加高效
ICLR 2022 | 基于对抗自注意力机制的预训练语言模型
Aardio - does not declare the method of directly passing float values
企业不想换掉用了十年的老系统
【Unity】升级版·Excel数据解析,自动创建对应C#类,自动创建ScriptableObject生成类,自动序列化Asset文件
Balanced Multimodal Learning via On-the-fly Gradient Modulation(CVPR2022 oral)
随机推荐
Demonstration of the development case of DAPP system for money deposit and interest bearing financial management
Hard core observation 545 50 years ago, Apollo 15 made a feather landing experiment on the moon
Unified Focal loss: Generalising Dice and cross entropy-based losses to handle class imbalanced medi
Enterprises do not want to replace the old system that has been used for ten years
【Unity】升级版·Excel数据解析,自动创建对应C#类,自动创建ScriptableObject生成类,自动序列化Asset文件
Is there any requirement for the value after the case keyword?
Volatile keyword
监控界的最强王者,没有之一!
树的先序中序后序遍历
Let's see through the network i/o model from beginning to end
案例推荐丨安擎携手伙伴,保障“智慧法院”更加高效
How to confirm the storage mode of the current system by program?
Puppeter connects to the existing Chrome browser
【无标题】
cuda 探索
华为云GaussDB(for Redis)揭秘第21期:使用高斯Redis实现二级索引
Jafka source analysis processor
Sword finger offer question brushing record 1
Precise drag and drop within a contentable
Windows Auzre 微软的云计算产品的后台操作界面