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

Question

所以目前我正在构建一个 Electron 应用程序，并用python和flask编写了后端，因此我目前正在加载本地主机网址，如下所示

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？

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