Манипулировать DOM в электроне

Каков наилучший способ манипулировать DOM в электронном приложении?Манипулировать DOM в электроне

Я сделал некоторые уроки из Docs с помощью IPC и webcontents не повезло

Моего приложения настолько просто, я просто хочу, чтобы использовать Интернет, как консоль и показывать сообщения (оказывать процедурный) пришедшие из результатов нескольких функции синхронизации (main proc)

Я обновил вопрос с помощью реального кода.

Я собираюсь поставить еще один код, более простой, чтобы видеть и более простой для теста (я думаю), это реальный код и работает (но не так, как я хочу)

Когда я запускаю электрон только пишет последнее сообщение. Хорошо, ответ очень быстро, и я не могу увидеть первый messsage но отбрасывать, что я поставил SetTimeout и большое для() петли тоже, чтобы сделать прописную функция занимает больше времени

index.js

const electron = require('electron'); 
const {app} = electron; 
const {BrowserWindow} = electron; 
const ipc = require('electron').ipcMain 

app.on('ready',() => { 
    let win = new BrowserWindow({width: 800, height: 500}); 

    win.loadURL('file://' + __dirname + '/index.html'); 

    // Emitted when the window is closed. 
    win.on('closed',() => { 
    win = null; 
    }); 

    // Event that return the arg in uppercase 
    ipc.on('uppercase', function (event, arg) { 
    event.returnValue = arg.toUpperCase() 
    }) 
});

index.html

<html> 
    <body> 
     <div id="konsole">...</div> 

     <script> 
     const ipc = require('electron').ipcRenderer 
     const konsole = document.getElementById('konsole') 

     // Functions 
     let reply, message 

     // First MSG 
     reply = ipc.sendSync('uppercase', 'Hi, I'm the first msg') 
     message = `Uppercase message reply: ${reply}` 
     document.getElementById('konsole').innerHTML = message 

     // Second MSG 
     reply = ipc.sendSync('uppercase', 'Hi, I'm the second msg') 
     message = `Uppercase message reply: ${reply}` 
     document.getElementById('konsole').innerHTML = message 
     </script> 
    </body> 
</html>

источник

2016-07-28 Francis Vega

"результат" представляет собой значение ссылочного типа. «result» всегда имеет значение chenge, когда result = funcC() или другое; Попробуйте следующее:

$('#msg').text(result.ToString());

источник

2016-07-28 11:34:50

Вы можете объединить между вашим концом и концом с помощью webContents и IPC. Затем вы сможете управлять своими кодами в интерфейсе с помощью директивы backend.

Для экземпляра (Backend to Frontend);

Ваш main.js отправляет сообщение на ваш интерфейс.

mainwindow.webContents.send('foo', 'do something for me');

Ваш frond-end будет приветствовать это сообщение здесь;

const {ipcRenderer} = require('electron'); 

ipcRenderer.on('foo', (event, data) => { 
     alert(data); // prints 'do something for me' 
});

Например (Frontend бакэнду);

Ваш frond-end;

const {ipcRenderer} = require('electron'); 

ipcRenderer.send('bar',"I did something for you");

Ваш задний конец;

const {ipcMain} = require('electron'); 

ipcMain.on('bar', (event, arg) => { 
    console.log(arg) // prints "I did something for you" 
    event.sender.send('foo', 'done') // You can also send a message like that 
})

ОБНОВЛЕНИЕ ПОСЛЕ ОБНОВЛЕНИЕ ВОПРОС;

Я пробовал ваши коды на своих местных, кажется, работает.

Не могли бы вы попробуете его с помощью insertAdjacentHTML вместо «innerHTML», чтобы просто убедиться или просто использовать console.log.

Нравится это;

document.getElementById('konsole').insertAdjacentHTML('beforeend',message);

источник

2016-07-29 08:53:36 utkuDAT

Это работает только если я запускаю события вручную, если я ставлю secuence функций основного процесса дает контроль в процессе рендеринга, когда последняя функция закончена, теряя Inbetween сообщения. –

@FrancisVega Я обновил свой ответ. – utkuDAT

Не работает. : S Я записал gif, чтобы показать это. Я хочу, чтобы поэтапная консольная консоль отображалась в электронном DOM. примечание: я поставил большой цикл for() для моделирования времени процесса. https://drive.google.com/file/d/0B9FZG4S1yT5wNk04ajNHQTZ4RTQ/view –

ответ

Смежные вопросы