How can I access classes and Ids from the main index.html page in another window

[aaron10500]

In my electron application, I have a frameless window which is created once i click a button. A new html template is loaded in. This is then the new window which is being focussed on.

When i click on one of the buttons within this window I want to alter the appearance of some of the elements that are within the index.html.

My question is how would I be able to put the focus on both of the browser windows, or is there a way to load in the elements (Ids and classes) of the index.html page so i can have easy access to them in my JS file?

I’ve tried to do something like below, but this didn’t work.

  const mainWin = remote.BrowserWindow.getFocusedWindow();
  mainWin.getParentWindow();
  mainWin.focus();

I’ve seen people using the localStorage on forums, but I want to be able to have access to many of the elements.

Any advice would be brilliant, thankyou!

[dennisjn]

Try localsStorage.

localStorage.setItem('id') = document.setItemById('pageNr');

and

const pageId = localStorage.getItem('pageNr');

[aaron10500]

@dennisjn

const pageId = localStorage.getItem('pageNr');

Hey thanks for the reply!, i’m just a bit confused about the pageNr - how would i then use the pageId variable to reference the individual Id elements? apologies as im pretty new to javascript.

for example i would like to access a div element in my sidebar.html file with an id of “notready-reasons”. This is so that when when click on a button in my index.html file i can then generate the animation when the new browser window opens. See function below:

function openHorizontalWindow() 
{
    localStorage.setItem('id') = document.setItemById('pageNr');
    const pageId = localStorage.getItem('pageNr');

    document.getElementById('notready-reasons').style.animation = "moveright 0.45s ease 0s forwards"
    
}

[dennisjn]

My apologies, I had a typo

localStorage.setItem('id') = document.setItemById('pageNr')

The document.setItemById(‘pageNr’) should be document.getItemById(‘pageNr’)

In my work, as I am using “document.getItemById()” quite often I have a function"

const $id = id => document.getItemById(id);

Saves a lot of typing.
But back to your query
First I have never used templates I use one html file for everything, just change the content using js. I also develop for Chrome only as I use elements, like dialog, that are only fully supported by Chrome.
So when you talk about changing pages and using templates, I can only guess what you are referring to.
However
In your click event handler you can use the localStorage.setItem(identifier) to store whatever text you desire.
Then when in the new page you can use: let identifier = localStorage.getItem(identifier) to retrieve it in the new page.