web-dev-qa-db-ja.com

Electronで現在のウィンドウの代わりに新しいウィンドウを開く方法

ボタンをクリックすると新しいウィンドウを開くことができましたが、新しいポップアップウィンドウが表示されます。メインウィンドウの代わりに新しいウィンドウを開くにはどうすればよいですか？

var app = require('app')
var BrowserWindow = require('browser-window')
var ipc = require('ipc')

app.on('ready', function () {
    var mainWindow = new BrowserWindow ({
        width: 800,
        height: 600
    })
    mainWindow.loadURL('file://' + __dirname + '/main.html')
    //mainWindow.openDevTools() //opens inspect console

    var prefsWindow = new BrowserWindow ({
        width: 400,
        height: 400,
        show: false
    })
    prefsWindow.loadURL('file://' + __dirname + '/prefs.html')

上記のコードでは、新しいウィンドウがポップアップします。私が何を意味するかを示すためにスクリーンショットを添付しました。

ポップアップウィンドウ

そのポップアップウィンドウの代わりに、「prefs」でメインウィンドウを置き換えたい（および追加されたメインウィンドウを置き換える他のオプション）。

javascriptelectron
6
machinebit

新しいウィンドウを作成する代わりに、prefs.htmlをmainWindowにロードするだけです。古いコンテンツ（main.html）は、追加のウィンドウを開かなくても置き換えられます。

それぞれのボタンがmain.html内に配置されている場合、ipcリモートモジュールを介してこのロードを適用する必要があります。

次の this SO answer for Electron 0.35.0以降：

// In main process.
const ipcMain = require('electron').ipcMain;

// in main process, outside of app.on:
ipc.on('load-page', (event, arg) => {
    mainWindow.loadURL(arg);
});

// In renderer process (web page).
const ipc = require('electron').ipcRenderer;

新しいページの読み込みは、次のように実行できます。

ipc.send('load-page', 'file://' + __dirname + '/prefs.html');
9
Jens Habegger

興味のある人のために、これは私がしたことです。

login formがあり、サインインした後、メインウィンドウに問題が発生する場所を表示したいとします。

index.jsを設定

const electron = require('electron');
const url = require('url');
const path = require('path');

const { app, BrowserWindow } = electron;

let loginWindow;
var mainIndex = '../../index.html'; //the login window
var directoryHtml = '../html/'; //directory of where my html file is, the main window is here except the login window
var iconPath = '../../images/logo.png'; //replace with your own logo
let { ipcMain } = electron;
var newWindow = null;

app.on('ready', function () {
    loginWindow = new BrowserWindow({//1. create new Window
        height: 600, width: 450,
        minHeight: 600, minWidth: 450, //set the minimum height and width
        icon: __dirname + iconPath,
        frame: false, //I had my own style of title bar, so I don't want to show the default
        backgroundColor: '#68b7ad', //I had to set back color to window in case the white screen show up
        show: false //to prevent the white screen when loading the window, lets not show it first
    });

    loginWindow.loadURL(url.format({ //2. Load HTML into Window
        pathname: path.join(__dirname, mainIndex),
        protocol: 'file',
        slashes: true
    }));

    loginWindow.once('ready-to-show', () => {
        loginWindow.show() //to prevent the white screen when loading the window, lets show it when it is ready
    })
});

//dynamically resize window when this function is called
ipcMain.on('resize', function (e, x, y) {
    loginWindow.setSize(x, y);
}); 

/** start of showing new window and close the login window **/
ipcMain.on('newWindow', function (e, filenName) {

    if(newWindow){
        newWindow.focus(); //focus to new window
        return;
    }

    newWindow = new BrowserWindow({//1. create new Window
        height: 600, width: 800,
        minHeight: 600, minWidth: 800,
        icon: __dirname + iconPath,
        frame: false,
        backgroundColor: '#68b7ad',
        show: false
    }); 

    newWindow.loadURL(url.format({ //2. Load HTML into new Window
        pathname: path.join(__dirname, directoryHtml + filenName),
        protocol: 'file',
        slashes: true
    }));

    newWindow.once('ready-to-show', () => { //when the new window is ready, show it up
        newWindow.show()
    })

    newWindow.on('closed', function() { //set new window to null when we're done
        newWindow = null
    })

    loginWindow.close(); //close the login window(the first window)
});
/** end of showing new window and closing the old one **/

app.on('closed', function () {
    loginWindow = null;
});

// Quit when all windows are closed.
app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (loginWindow === null) {
        createWindow()
    }
})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=Edge">
    <title>Login Window</title>
</head>

<body>
    <h1>Login</h1>
    <!-- . . . . -->
    <button id="btn-login" onclick="loginNow()"></button>
    <!-- . . . . -->
    <script>
        function loginNow(){
            //.....
            //assuming the authentication is valid, we want to show now the new window which will be our main window
            const { ipcRenderer } = require('electron'); //require electron

            //using ipcRenderer, let's call the function in index.js where the function name is `newWindow`, 
            //the `main.html` is the new html file I want to show, use your own.
            ipcRenderer.send('newWindow','main.html'); 
        }
    </script>
</body>

</html>

これが正しい方法であるかどうかはわかりません。また、このようにすることのデメリットもわかりませんが、何も望んでいません。これが誰かを助けることを願っています。

4
Polar

いくつかのオプションがあります。

prefsWindow.focus()を呼び出すだけで、2番目のウィンドウが最初のウィンドウの上にあることを確認できます。

mainWindow.hide()またはmainWindow.destroy()を使用してメインウィンドウを非表示または閉じ、2番目のウィンドウのみを開いたままにすることができます。完了したら、再度開きます。

または、2つのウィンドウを使用する代わりに、設定ページを最初のウィンドウにロードし、完了したらメインページに戻すこともできます。

1
Teak

簡単な解決策が見つかるまで、私はあなたと同じ問題と戦っていました。 JSコードは次のとおりです。

const electron = require('electron');
let rootPath = "src/Page/index.html" //Path to the html file

LoadNewWindowInCurrent(rootPath); //Opens new html file in current window

//Here's the ready function for you to use
function LoadNewWindowInCurrent (PathToHtml){
   let localWindow = electron.remote.getCurrentWindow(); 
   localWindow.LoadFile(PathToHtml);
}
0
Manfreds3

実際のコンテンツにアクセスする前に何よりも認証が必要なアプリケーションを作成するときに、同様の問題に直面していました。したがって、アプリケーションの最初のメインページはログインフォームでした。ログインが成功すると、代わりに実際のコンテンツが想定されていた場所に新しいページが読み込まれるはずです。そうするために、私は次のことをしました：

Main.jsまたはindex.jsでは、最初に2番目のウィンドウをロードして表示する代わりに、IPCイベントリスナー内にロードします。したがって、ロードします。 IPCリスナーが特定のイベントを受信したときのページ。

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

ipcMain.on('login', (event, arg) => {
loginPage.loadURL(url.format({
pathname: path.join(__dirname, 'mainpage.html'),
protocol: 'file',
slashes: true
}));
});

LoginPageはapp.on（）で作成されるメインウィンドウであり、mainpageはログインが成功した後に作成される2番目のページであることに注意してください。

次に、loginPage.htmlで、ログインを確認した後、成功した場合は、そのIPCレンダラーメッセージをメインプロセスに送り返します。これは非常に簡単です。

var ipc = require('electron').ipcRenderer;

ipc.send('login', 'an-argument');

上記の方法が機能するはずです。私は初心者なので、これを行うのに最適な方法なのか、すぐには見られない望ましくない影響があるのか​​はわかりませんが、うまくいったので、試してみてください。

0
Puk