CODEWITHSUNDEEP
javascriptelectron
FatalKeystroke
FatalKeystroke

Reputation: 3042

Electron Doesn't Return Proper Value From window.open()

I have an Electron app which renders an HTML file with contents along the lines of:

<html>
  <head>
    <script>
      var myfunc = function() {
        var data = "Some stuff to display in another window.";
        var secondWindow = window.open();
        secondWindow.document.write(data);
      };
    </script>
  </head>
  <body>
    <button onclick="myfunc();">Open Second Window</button>
  </body>
</html>

Now this works in my normal browser (Firefox) but in the Electron app when I JSON.stringify(secondWindow); I get {'closed': false} and not an actual window handle (though an empty window does open).

Can anyone shed extra light on this behavior and perhaps a way to achieve the desired result with Electron?

Electron app:

const {app, BrowserWindow} = require("electron");
const path = require("path");
const url = require("url");

let win

function createWindow () {
  win = new BrowserWindow({width: 800, height: 600})
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
  win.webContents.openDevTools({"detach": true})
  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

Upvotes: 0

Views: 1312

Answers (2)

Toan Tran
Toan Tran

Reputation: 2047

You have to create BrowserWindow and call loadURL method

// In the main process.
const {BrowserWindow} = require('electron')

// Or use `remote` from the renderer process.
// const {BrowserWindow} = require('electron').remote

let win = new BrowserWindow({width: 800, height: 600})
win.on('closed', () => {
  win = null
})

// Load a remote URL
win.loadURL('https://github.com')

// Or load a local HTML file
win.loadURL(`file://${__dirname}/app/index.html`)

UPDATE Please handle the click event on the main controller:

var remote = require('electron').remote;
$(document).on('click', '#btn', function() {
    // Hide current window
    var currWindow = remote.getCurrentWindow();
    currWindow.hide();
});

Handle main window hide event to make sure that main window is closed

win.on('hide', function(e) {
    showNewWindow();
});


var showNewWindow = function() {
    newWindow = new BrowserWindow(windowOption);
    newWindow .loadURL(`file://${__dirname}/app/new.html`)
}

Upvotes: 1

Anatoly Strashkevich
Anatoly Strashkevich

Reputation: 1914

This works in a different way. All your browser windows instances managed by your main process, you need to create new window instance in your main process and set it on top of your current window, or you can reload url in you current main window. If this necessity arise from logic in a renderer process you need to notify your main process (through ipcRenderer.send) to perform some action in main process on particular browser window handle. In your current code you just create one browser window, when you call window.open in renderer process, this new instance detached from main process and cant be controlled.

Upvotes: 0

Related Questions