Javascript 在电子应用程序中浏览多个页面_Javascript_Html_Electron

Javascript 在电子应用程序中浏览多个页面

javascript html electron

Javascript 在电子应用程序中浏览多个页面,javascript,html,electron,Javascript,Html,Electron,说到HTML/JS，我真的是一个初学者，我正在尝试基于Electron构建一个简单的多页面应用程序。由于页面的布局和整体功能有很大的不同，我已经读到，我应该避免使用单页面应用程序的方法，这是有据可查的。我想用按钮从一页移动到另一页，我被卡住了。我正在主页中创建按钮，但在加载其他页面时无法创建其他按钮。因此，创建的起始页有两个按钮，它们将打开Page2和起始页，但新创建的窗口上不会显示任何按钮。当我重新加载起始页时，我希望出现相同的两个按钮。另外，由于page2指向与起始页相同的脚本，我希望看到

说到HTML/JS，我真的是一个初学者，我正在尝试基于Electron构建一个简单的多页面应用程序。由于页面的布局和整体功能有很大的不同，我已经读到，我应该避免使用单页面应用程序的方法，这是有据可查的。我想用按钮从一页移动到另一页，我被卡住了。我正在主页中创建按钮，但在加载其他页面时无法创建其他按钮。因此，创建的起始页有两个按钮，它们将打开Page2和起始页，但新创建的窗口上不会显示任何按钮。当我重新加载起始页时，我希望出现相同的两个按钮。另外，由于page2指向与起始页相同的脚本，我希望看到这两个按钮出现在page2上

在代码下方添加：

package.json:

{
  "name": "multiple-windows3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

Index.js

const { app, BrowserWindow,ipcMain } = require('electron')
function createWindow () {
  let win = new BrowserWindow({width: 800,height: 600, webPreferences: {
    nodeIntegration: true}
   })
  win.loadFile('index.html')
}
app.on('ready', createWindow)
ipcMain.on('open-new-window', (event, fileName) => {
    let win = new BrowserWindow({width:800, height:600})
    win.loadURL(`file://${__dirname}/` + fileName + `.html`)
})

const remote = require('electron').remote
const main = remote.require('./index.js')
const {ipcRenderer} = require('electron');

var button = document.createElement('button')
button.textContent = 'Open Window'
button.addEventListener('click', () => {
   ipcRenderer.send('open-new-window', 'page2');
}, false)
document.body.appendChild(button)

var button2 = document.createElement('button')
button2.textContent = 'Open Window2'
button2.addEventListener('click', () => {
    ipcRenderer.send('open-new-window', 'index');
 }, false)
document.body.appendChild(button2)

Index.html

<body>
    <h1>Start</h1>
    <script src="home.js"></script>
</body>

<body>
    <h1>Page2</h1>
    <script src="home.js"></script>
</body>

page2.html

<body>
    <h1>Start</h1>
    <script src="home.js"></script>
</body>

<body>
    <h1>Page2</h1>
    <script src="home.js"></script>
</body>


第2页

谢谢