0
It is possible somehow to trigger events in multiple windows using JS?
for example: I have 2 pages with their distinct htmls, I can click a button on one and trigger an event on the other? If so, how?
I want this page to have the chronometer called, when giving the (play, pause, Restart) on the other screen...
screen 1:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Timer/Hora JW</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div class="topo">
<button class="controles-botao">Controles</button>
<button class="controles-botao sumir" id="play" onclick="start();">play</button>
<button class="controles-botao sumir" id="pause2" onclick="stop();">pause</button>
<button class="controles-botao sumir" id="restart2" onclick="restart();">restart</button>
<a href="#" class="sobre">Sobre</a>
</div>
<div class="timer-hora">
<div class="timer-titulo">
<img class="img-cronometro" src="img/cronometro.svg">
<h1 class="timer-texto">cronômetro</h1>
</div>
<div class="timer-relogio">
<div class="horas">00</div>
<div class="minutos">:00</div>
<div class="segundos">:00</div>
<div class="centesimos">:00</div>
</div>
<div class="hora-corpo">
<div class="hora-relogio"></div>
</div>
</div>
</div>
<script src="js/renderer.js"></script>
<script src="js/Hora.js"></script>
<script src="js/cronometro.js"></script>
</body>
</html>
screen 2:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Controles Timer</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/controles.css">
</head>
<body>
<div class="container">
<div class="timer-full">
<div class="timer-relogio">
<div class="horas">00</div>
<div class="minutos">:00</div>
<div class="segundos">:00</div>
<div class="centesimos">:00</div>
</div>
<ul class="controles-timer">
<li class="start"><button id="start" href="#" onclick="start();"><img src="img/play.svg"
alt="botão start"></button>
</li>
<li class="pause"><button id="pause" href="#" onclick="stop();"><img src="img/pause.svg"
alt="botão pause"></button>
</li>
<li class="restart"><button id="restart" href="#" onclick="restart();"><img src="img/repeat.svg"
alt="botão restart"></button>
</li>
</ul>
</div>
</div>
<script src="js/renderer.js"></script>
<script src="js/cronometro.js"></script>
</body>
</html>
Note that there are some semantic errors that I need to correct, but the question is how to make a page 2 button trigger an event on page 1.
i had tried to create a button on page 1, hide it through CSS and call the function click() button(page 1) within the button function(page 2), but without success...
the application is being made with the help of Electron, follow the js files: redenderer:
const {
ipcRenderer
} = require('electron');
let linkSobre = document.querySelector('.sobre');
let botaoControles = document.querySelector('.controles-botao');
linkSobre.addEventListener('click', () => {
ipcRenderer.send('abre-sobre');
});
botaoControles.addEventListener('click', () => {
ipcRenderer.send('abre-controles')
});
main:
const {
app,
BrowserWindow,
ipcMain
} = require('electron');
app.on('ready', () => {
let mainWindow = new BrowserWindow({
width: 900,
height: 700
});
mainWindow.loadURL(`file://${__dirname}/app/index.html`);
//mainWindow.setMenuBarVisibility(false);
});
let sobreWindow = null;
ipcMain.on('abre-sobre', () => {
if (sobreWindow == null) {
sobreWindow = new BrowserWindow({
width: 300,
height: 350,
alwaysOnTop: true,
frame: false
});
sobreWindow.on('closed', () => {
sobreWindow = null;
});
}
sobreWindow.loadURL(`file://${__dirname}/app/sobre.html`);
});
ipcMain.on('fecha-sobre', () => {
sobreWindow.close();
})
let controlWindow = null;
ipcMain.on('abre-controles', () => {
if (controlWindow == null) {
controlWindow = new BrowserWindow({
width: 420,
height: 305,
alwaysOnTop: true
});
controlWindow.on('closed', () => {
controlWindow = null;
});
}
controlWindow.loadURL(`file://${__dirname}/app/controles.html`);
//mainWindow.setMenuBarVisibility(false);
});
chronometer:
var centesimos = 0;
var segundos = 0;
var minutos = 0;
var horas = 0;
var c = document.querySelector('.centesimos');
var s = document.querySelector('.segundos');
var m = document.querySelector('.minutos');
var h = document.querySelector('.horas');
function start() {
control = setInterval(cronometro, 10);
document.getElementById('start').setAttribute('disabled', 'disabled');
}
function stop() {
clearInterval(control);
document.getElementById('start').removeAttribute('disabled');
}
function restart() {
clearInterval(control);
centesimos = 0;
segundos = 0;
minutos = 0;
horas = 0;
c.innerHTML = ":00";
s.innerHTML = ":00";
m.innerHTML = ":00";
h.innerHTML = "00";
document.getElementById('start').removeAttribute('disabled');
stop();
}
function cronometro() {
if (centesimos < 99) {
centesimos++;
if (centesimos < 10) {
centesimos = "0" + centesimos
}
c.innerHTML = ":" + centesimos;
}
if (centesimos == 99) {
centesimos = -1;
}
if (centesimos == 0) {
segundos++;
if (segundos < 10) {
segundos = "0" + segundos
}
s.innerHTML = ":" + segundos;
}
if (segundos == 59) {
segundos = -1;
}
if ((centesimos == 0) && (segundos == 0)) {
minutos++;
if (minutos < 10) {
minutos = "0" + minutos
}
m.innerHTML = ":" + minutos;
}
if (minutos == 59) {
minutos = -1;
}
if ((centesimos == 0) && (segundos == 0) && (minutos == 0)) {
horas++;
if (horas < 10) {
horas = "0" + horas
}
h.innerHTML = horas;
}
}
Without examples and explanatory codes, you can’t help. Read [Ask], [mcve] and [tour].
– Sam
Yes, it is possible with websocket, postMessage etc.
– Valdeir Psr