How do I load a page and immediately edit the DOM in electron?

Question

I'm trying to create a markdown editor.

So far: I have loaded the index page. I'm using fs.readdir to get the titles of all the markdown files and display them in the sidebar. Then, on clicking on of these title #content get's the content.

   module.exports = (win) => { 
        fs.readdir( './data', (err, data) =>{
        data.map(title => {    
          if(title.split('.md').length==2){
            el = document.createElement("li"); // get gave it the title ..
            el.addEventListener('click', function(e){
              fs.readFile(`./data/${title}`, (err, data) => {
                document.getElementById('content').innerHTML = data;
              });
            })
            document.getElementById('titles').appendChild(el) // title are on the page

The problem is when I introduce another page

I have a preferences page

win.loadURL(path.join('file://', __dirname, '../static/preferences.html'))

It has the same sidebar, hence I import the same code to get the titles. But now when I click one of the links, I don't want document.getElementById('content').innerHTML = data; but I want to load the index page and then inject the content

So far I tried this

const checkPageState = (pageName, callback) => {
  if(pageName === "preferences"){
    ipcRenderer.send(GO_TO_PAGE, 'index')
  }
  setTimeout(callback(), 1000);
}
...
el.addEventListener('click', function(e){
    checkPageState(win, ()=>{
      fs.readFile(`./data/${title}`, (err, data) => {
       if (err) throw err;
     fileDir = `./data/${title}`;
     document.getElementById('content').innerHTML = data;
    });
  })
})

My thinking was ipcRenderer.send(GO_TO_PAGE, 'index') would load the index page (which it does) when wait for a bit and then inject the data into the index page. It doesn't!

How can I do this?

Answer 1

I recently tried to do this as well and it was kinda tricky but I found something that worked:

In electron when it tries to go to another page I stop it from going to it with:

win.webContents.on('will-navigate', function (evt, url) {
    evt.preventDefault();
    win.webContents.executeJavaScript('makeHiddenPageIframe("' + url + '");');
});

Then it calls the makeHiddenPageIframe function defined on the page.

Then in the page I define the makeHiddenPageIframe function:

function makeHiddenPageIframe (url) {
    var hiddenPage = document.createElement("iframe");
    hiddenPage.setAttribute("src", url);
    hiddenPage.style.display = 'none';
    document.body.appendChild(hiddenPage);
    hiddenPage.onload = function () {
        var frameDocument = hiddenPage.document;
        if (hiddenPage.contentDocument) {
            frameDocument = hiddenPage.contentDocument;
        } else if (hiddenPage.contentWindow) {
            frameDocument = hiddenPage.contentWindow.document;
        }
        document.open();
        document.write(frameDocument.documentElement.innerHTML);
        document.close();
        window.history.pushState("", document.title, url.replace('https://' + window.location.hostname, ''));
    }
}

This then makes a iframe and loads the page in there then once it has loaded copy all the html from the iframe to the parent window so it seems like the switch happened instantly.

Also the window.history.pushState thing at the bottom was when you overwrite the html the url stays the same so when you reload it goes back to the original page but the window.history.pushState changes the url without reloading the page.

Any form of navigation will do the iframe load so you would keep your win.loadURL( to go to another markdown page.

The 'will-navigate' event docs.

window.history.pushState ref.

I hope this helps :)