如何用新的html文件打開更新電子瀏覽器窗口

我是電子新手。我有兩個html頁面，我想在點擊一個按鈕時打開第二頁。我的代碼如下，但我只是得到一個空白的窗口;而不是第二頁。如何用新的html文件打開更新電子瀏覽器窗口

這是index.js

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

app.on('ready',()=>{ 
    let win = new BrowserWindow({width:960, hehight:540}) 
    win.loadURL(`file://${__dirname}/login.html`) 
}) 

exports.openWindow = (fileName) => { 
    let win = new BrowserWindow({width:960, height:540}) 
    win.loadURL(`file://${__dirname}/` + fileName + `.html`) 
}

這是login.js

const remote = require('electron').remote 
const index = remote.require('./index.js') 

var login = document.getElementById('login') 
login.addEventListner('click',() => { 
    var window = remote.getCurrentWindow() 
    index.openWindow('pageTwo') 
    window.close() 
}, false)

登錄是HTML按鈕的ID。

我想獲得第二頁。我該如何執行此操作？

來源

2017-07-05 G.A. Cheran

做你想做第二個HTML文件在不同的瀏覽器窗口中加載？ –

@VictoryOsikwemhe可以更新當前窗口。我想打開第二頁並關閉第一頁。 –

從呈現程序進程訪問遠程api所需的功能有時會導致死鎖，只要您使用參數調用該函數。你應該這樣做，使用ipc

// main process 
    const { app, BrowserWindow, ipcMain: ipc } = require("electron"); 
    let win; 
    app.on("ready",() => { 
    win = new BrowserWindow(); 
    win.loadURL(`file://${__dirname}/index.html`); 
}); 

ipc.on("send-window-id", (event) => { 
    event.sender.send("window-id-sent", win.id); 
}); 


// renderer process 

<html> 
    <head></head> 
    <body> 
     <button>new window</button> 
     <script> 
     const { remote: { BrowserWindow }, ipcRenderer: ipc } = require("electron"); 

     var button = document.querySelector("button"); 
     button.addEventListener("click", event => { 
      let win = new BrowserWindow(); 
      win.loadURL(`file://${__dirname}/page2.html`); 
      ipc.send("send-window-id"); 
     }); 
     ipc.on("window-id-sent", (event,id) => { 
      BrowserWindow.fromId(id).close(); 
     }); 
    </script> 
    </body> 
</html>

的BrowserWindow.fromId臨危窗口的ID，並通過按順序來傳遞消息用IPCRenderer和IPCMain返回該ID的窗口對象

來源

2017-07-05 17:29:18

您可以輕鬆地做到這一點主流程和渲染器之間。

index.js

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

app.on('ready',()=>{ 
    let win = new BrowserWindow({width:960, hehight:540}) 
    win.loadURL(`file://${__dirname}/login.html`) 
}) 

ipcMain.on('open-new-window', (event, fileName) => { 
    let win = new BrowserWindow({width:960, height:540}) 
    win.loadURL(`file://${__dirname}/` + fileName + `.html`) 
}

正如你所看到的，我改變了你的代碼只添加ipcMain，並從渲染器接收消息。

const {ipcRenderer} = require('electron'); 

let login = document.getElementById('login'); 
login.addEventListner('click',() => { 
    ipcRenderer.send('open-new-window', 'pageTwo'); 
}, false);

這同樣適用於login.js和ipcRenderer。

該文檔解釋比我更好的方式，可以找到here for ipcMain和here for ipcRenderer。

來源

2017-07-05 17:31:03

我看過你的代碼，從我看到你要求你的主要過程，你不能做到這一點，你需要使用IPC從您呈現進程發送消息或使用遙控BrowserWindow對象並獲取來自ID的窗口並使用loadURL。

使用IPC

index.js

const { ipcMain } = require("electron"); 

ipcMain.on("changeWindow", function(event, arg) { 
    switch (arg) { 
     case "page1": 
      win.loadURL("Page1 URL"); 
      break; 
     case "page2": 
      win.loadURL("Page2 URL"); 
      break; 
     case "page3": 
      win.loadURL("Page3 URL"); 
      break; 
     ... 
    } 
});

遠程使用BrowserWindow

const { ipcRenderer } = require("electron"); 

function onButtonClick() { 
    ipcRenderer.send("changeWindow", "page2"); 
}

第二個選項。

const { BrowserWindow } = require("electron").remote; 

function onButtonClick() { 
    let win = BrowserWindow.fromId("ID of your window"); 

    win.loadURL("URL you want to load (your login.html file)"); 
} 

// OR 

function onButtonClick() { 
    let win = BrowserWindow.getFocusedWindow(); 

    win.loadURL("URL you want to load (your login.html file)"); 
} 

// OR 

function onButtonClick() { 
    /* 
     Not the best method but would work. 
    */ 

    let wins = BrowserWindow.getAllWindows(); 

    let windowIndex = /* index of your window in the wins array */ 

    wins[windowIndex].loadURL("URL you want to load (your login.html file)"); 
}

來源

2017-07-05 17:38:19 y0hami

如何用新的html文件打開更新電子瀏覽器窗口

回答

相關問題