Switching between HTML pages after few econds in electron


#1

Hi. I’m learning electron and I would like to add one window which will replace it’s content every few seconds.

Something like this:
page_1.html > 5 second delay > page_2.html > 5 second delay and back to page_1.html

How can I do this? Thanks for suggestions


#2

Sticking <meta http-equiv="refresh" content="5; url=https://example.com/"> in your <head> should do the job

There are other ways of doing this, perhaps better ways depending on your use case, but this should do what you want it to


#3

The following should do the trick:

const fs = require(‘fs’);
const { promisify } = require(‘util’);
const path = require(‘path’);
const readFile = promisify(fs.readFile);
const htmlArray = [
‘path/to/my/page1.html’,
‘path/to/my/page2.html’,
‘path/to/my/page3.html’,
‘path/to/my/page4.html’,
‘path/to/my/page5.html’
];
let index = 0;
setInterval(switchHTML,5000);
async function switchHTML(){
if(index > 4){
index = 0;
}
const html = htmlArray[index];
index++;
const render = await readFile(path.join(__dirname, html), ‘utf-8’);
const parser = new DOMParser();
const childernArray = parser.parseFromString(render,‘text/html’).querySelector(‘body’).childNodes;
const frag = document.createDocumentFragment();
childrenArray.forEach(item => {
frag.appendChild(item);
});
document.body.appendChild(frag);
};

Basically in this solution you have an Array with all the Urls to the HTML files. Every 5 seconds it reads a file and displays the new HTML.

However, even though it works, you may consider to cache your html as well. So it loads the new html files just once and not over and over again.

You also could use 5 webviews in your code and every 5 seconds you change either the z-index or opacity or visibility or height, whatever fits best your needs.


#4

Thank you for this. As I said, I’m new into this and I’ve one small problem. I added this snippet into main.js but I just got confused…
Do I include this in main process or just renderer?

Here’s what I did:

const { app, BrowserWindow, Menu, Notification } = require('electron')
require('electron-debug')();
const fs = require('fs');
const { promisify } = require('util');
const path = require('path');
const readFile = promisify(fs.readFile);
const htmlArray = [
  'app/ui_elementSubstitution.html',
  'app/ui_elementClassEndTimes.html'
];

let win

function createWindow() {
  win = new BrowserWindow({
    width: 1280,
    height: 720,
    webPreferences: {
      webSecurity: false
    }
  })
  win.loadFile('app/ui_elementSubsitution.html');
  win.on('closed', () => {
    win = null
  })

  async function switchHTML() {
    if (index > 4) {
      index = 0;
    }
    const html = htmlArray[index];
    index++;
    const render = await readFile(path.join(__dirname, html), 'utf-8');
    const parser = new DOMParser();
    const childernArray = parser.parseFromString(render, 'text/html').querySelector('body').childNodes;
    const frag = document.createDocumentFragment();
    childrenArray.forEach(item => {
      frag.appendChild(item);
    });
    document.body.appendChild(frag);
  };

  var menu = Menu.buildFromTemplate([{
    label: 'Menu',
    submenu: [{
      label: 'Nastavenia',
      click() {
        win = new BrowserWindow({
          width: 800,
          height: 600
        }),
          win.loadFile('app/ui_settings.html')
      }
    },
    {
      type: 'separator'
    },
    {
      label: 'Celá obrazovka (F11)',
      click() {
        let myNotification = new Notification('Title', {
          body: 'Funkcia nie je implementovaná'
        })
        myNotification.onclick = () => {
          console.log('Notification clicked')
        }
      }
    },
    {
      label: 'Exit',
      click() {
        app.quit()
      }
    }
    ]
  }])
  Menu.setApplicationMenu(menu);
}

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

app.on('activate', () => {
  if (win === null) {
    createWindow();
    let index = 0;
    setInterval(switchHTML, 5000);
  }
})

Can you explain what I did wrong or what to change? Thank you.


#5

You have to add it to the Render process. That is where your DOM is.