node.js - 如何在加载本地托管 url 时使无框架电子应用程序可移动

Question

所以目前我正在构建一个电子应用程序并使用python和flask编写后端所以我目前正在加载本地主机url，如下所示

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




function createWindow () {
    var executablePath = 'app.exe';

var child = require('child_process').exec;
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    transparent: true,
    movable: true,

    // show: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })


  mainWindow.loadURL('http://127.0.0.1:5001/')



}

app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {

    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})


app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

我感到困惑的是如何使应用程序可移动，同时仍然少框架。

在其他堆栈溢出读取中，我一直在添加此 css。

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

我的问题是如果我从本地托管的 URL 运行应用程序，我应该在哪里添加这个 css

标签： node.jselectron

Answer 1

尝试这个

let mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.loadURL(`www.test.com`)
mainWindow.webContents.on('did-finish-load', function() {
mainWindow.webContents.insertCSS('.titlebar{-webkit-user-select: none;-webkitapp-region: drag;}')`enter code here`
                });

参考更多https://discuss.atom.io/t/inject-css-to-loadurl/26845/6