Managing mainWindow from other script?


#1
BrowserWindow = require('browser-window');


function largenTheThing() {
    mainWindow.setBounds({width: 1000, height: 600});
}

Is the code in iron.js, and HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
        <script type="text/javascript" src="iron.js"></script>
  </head>
  <body>
    <a href="#" onclick="largenTheThing()">Click here!</a>
  </body>
</html>

I knew it couldn’t work, but I had to try anything just to be sure that it couldn’t be that easy before wasting your time.

I know that proper function is win.setSize(width, height), but wrong function isn’t the problem, since error is about mainWindow not being defined. Any way to get that working?

~ I could include the main.js (and it may or may not work), but is there any other cleaner way?~
Nevermind, doesn’t work: Uncaught TypeError: Cannot read property ‘setSize’ of undefined.


#2

You can use the ipc module to communicate between the main process and renderer processes.


#3

I couldn’t understand IPC for heck. No examples and too strict. Also, I’m stupid, and I don’t know Node.JS for crap (my first time ever using such tool, mostly I’ve been using jQuery). Which makes it extra difficult.

Instead went for Remote which claims: The remote module provides a simple way to do inter-process communication (IPC) between the renderer process (web page) and the main process.

But even then:

var remote = require('remote');
var mainWindow = remote.require('browser-window');

function largenTheThing() {
    mainWindow.setSize(1000, 600);
}

Resulted in: Uncaught TypeError: mainWindow.setSize is not a function.


If it’s not a function, what is it? Apparently it does recognize mainWindow and it “knows” for a fact that setSize() is not a function, but exists… so I think it kind of works, except for setSize() part.

Changing it to:
mainWindow.setSize({width: 1000, height: 600}); same error.
mainWindow.setSize({1000, 600}); syntax error, “unexpected ,”


#4

I’m having a hard time understanding what you’re trying to accomplish. Do you want to have a button that when clicked changes the size of the window containing the button?


#5

Indeed. The button happens to be in mainWindow, the very first window spawned by main.js.

Sorry for not being clear enough.


#6

Try this:

main.js

var app = require('app')
var BrowserWindow = require('browser-window')
var ipc = require('ipc')
var mainWindow = null
app.on('ready', function () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadUrl(`file://${ __dirname}/index.html`)
})
ipc.on('resize', function (e, x, y) {
  mainWindow.setSize(x, y)
})

index.html

<!DOCTYPE html>
<title>test</title>
<button>click</button>
<script>
  var ipc = require('ipc')
  var btn = document.querySelector('button')
  btn.addEventListener('click', function (e) {
    e.preventDefault()
    ipc.send('resize', 600, 800)
  })
</script>



#7

OH!!

Now it’s so much clearer! Ooooh… thanks! If I were creator of Electron, I’d consider adding this example to the docs. It’s SO MUCH clearer now.

Thanks.


#8

The beauty of open source is that we’re all collaboratively the creators of Electron. Submit a Pull Request with your suggested changes to the documentation :grinning: Documentation PRs are an easy sell, typically. My first PRs for Atom were documentation fixes. It’s a great way to get started with a project.


#9

Yea, sometimes I forget how OpenSource actually works, but sure!

At least there’s that one way to thank Atom for initiating creation of this awesome tool.

Edit: I’m here because I clicked New Pull Request, but before I get to click the button Create Pull Request on the next page it gets grayed-out and the message next to it says: “Choose different branches or forks above to discuss and review changes.”. Regardless which branch I choose there’s no further follow-up to any type of “pull requests”. And I feel like I’m in very wrong place. I’m stuck :frowning:. Help :cry:.


#10

I like this tutorial on the general flow that GitHub models:

https://guides.github.com/introduction/flow/index.html

And here are a couple tutorials on making Pull Requests in specific:


#11

Might be a little late, but I got ehre looking for the same, so this might help others.
A way to accomplish this is:

// In your script that is not main
var remote = require(‘remote’);
remote.getCurrentWindow().setSize(600, 600);

The problem with the initial code is that mainWindow is actually the browser-window module loaded in the main
process, not the actual window.

Regards!


#12

Hi,

I trying to make 2 windows exchange some message. One of the window load local html file, the other one load an url. So I try to listen message event from each and path them to the other one.

Looks like I can do that using require(‘ipc[SOMETHING]’) but when I call require from the page I got undefined, any idea?

(I’m using last version of Electron and ipc doesn’t exist anymore, replaced by ipcMain and ipcRenderer)

Regards


#13

Ok I found why I can’t access to require, I have to set the property nodeIntegration at true like that:

win = new BrowserWindow({
‘webPreferences’: {
‘nodeIntegration’: true
}
});

Regards