0

É possível de alguma forma disparar eventos em múltiplas janelas usando JS?

por exemplo: tenho 2 páginas com seus htmls distintos, eu consigo clicar em um botão em uma e disparar um evento na outra? Se sim, como?

Quero que essa página tenha o cronometro chamado, ao dar o (play, pause, restart) na outra tela...

tela 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>

tela 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>

Notem que tem alguns erros de semântica que preciso corrigir, mas a dúvida é em relação a como fazer um botão da página 2 disparar um evento na página 1.

eu tinha tentado criar um botão na página 1, esconde-lo através de CSS e chamar a função click() do botão(página 1) dentro da função do botão(página 2), mas sem sucesso...

a aplicação está sendo feita com ajuda do electron, segue os arquivos js: renderer:

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);
});

cronometro:

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;
    }
}
2

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .