2017-07-05 12 views
0

私は電子を初めて使います。 2つのhtmlページがあり、ボタンがクリックされたときに2番目のページを開きたいとします。私はこれを次のようにコードしていますが、空白のウィンドウが表示されます。 2番目のページではありません。新しい電子ファイルで更新電子ブラウザウィンドウを開くには

これは

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`) 
} 

index.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ですlogin.jsです。

私は2ページを取得したいと思います。私はこれをどのように行うことができますか?

+0

ますが、別のブラウザウィンドウにロードする第二のHTMLファイルをしたいですか? –

+0

@VictoryOsikwemhe現在のウィンドウを更新しても問題ありません。私は2番目のページを開き、最初のページを閉じたいと思う。 –

答えて

0

レンダラプロセスからのリモートAPIを使用して必要な機能にアクセスすると、引数を指定してfunctionlaityを呼び出すときにデッドロックが発生することがあります。あなたは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をrecievesとメッセージを渡すためにIPCRendererとIPCMainを使用することにより、簡単にこれを達成することができます

1

そのIDのウィンドウオブジェクトを返す使用して、これを行う必要がありますメインプロセスとレンダラーの間あなたが見ることができるように

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を追加し、レンダラからメッセージを受信するようにコードを変更します。同じことがlogin.jsとipcRendererのために行く

login.js

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

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

ドキュメントは私が行うよりも良い方法を説明しており、here for ipcMainhere for ipcRendererが見つかりました。

0

あなたのコードを見ましたが、あなたのメインプロセスが必要であると思っていますが、これはできません。IPCを使用してレンダリングプロセスからメッセージを送信するか、リモートBrowserWindowオブジェクトを使用して取得します。 IDからウィンドウを開き、loadURLを使用します。リモートでBrowserWindow使用して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; 
     ... 
    } 
}); 

login.js

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

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

2番目のオプションを使用して

login.js

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)"); 
} 
関連する問題