Как получить доступ к элементам DOM в Electron? - PullRequest
Новая
       5

Как получить доступ к элементам DOM в Electron?

0 голосов
/ 23 мая 2018

Я новичок в Electron, и я пытаюсь сделать функцию, щелкнув по меню.Вот мой пример.

index.html

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Electron</title>
    <script src="main.js"></script>
  </head>
  <body>
    <input type="text" name="campo" id="campo" value="">
    <button type="button" name="funcao" onclick="funcao()">Função</button> <br /><br />
    <input type="text" name="url" id="url">
  </body>
</html>

В этом примере при вводе чего-либо в поле ввода «url» и нажатии кнопки будет показано, что было введено в поле ввода «campo».,Я хотел сделать то же самое, но, нажав в меню «funcao».

main.js (часть меню с функцией ниже) 

 {
    label: 'Função',
    click () { funcao(); }
  },

function funcao() {
  document.getElementById("campo").value = document.getElementById("url").value;
}

Ошибкаthis:

"ReferenceError: документ не определен"

Редактировать: мой английский плохой, я использовал Google Translate, извините.

1 Ответ

0 голосов
/ 24 мая 2018

Электрон имеет два процесса: main и render.Основной процесс в основном заключается в том, где происходят все тяжелые работы и настройка самого приложения.С другой стороны, в процессе рендеринга происходит весь рендеринг HTML.Обычно у вас есть один основной процесс, и у каждого BrowserWindow, WebView, ... есть свой собственный процесс рендеринга.

А вот и подвох, основной процесс не осведомлен о DOM, который отображается.Однако вы можете связываться между основным процессом и процессом рендеринга с помощью сообщений IPC .

Для получения более подробной информации я настоятельно рекомендую документацию по архитектуре приложения https://electronjs.org/docs/tutorial/application-architecture

Вариант A:

В вашем случае, когда вы создаете меню из основного процесса, у вас нет доступа к DOM процессов рендеринга.Что вам нужно сделать в обработчике кликов, это отправить сообщение IPC в ваше BrowserWindow.Там вы прослушиваете вызов и запускаете funcao();

Модифицированный пример из документов: 

// In main process.
  const {ipcMain} = require('electron')
  const mainWindow = ... // reference to the BrowserWindow

  mainWindow.webContents.send('asynchronous-message', 'ping')

// In renderer process (web page).
  const {ipcRenderer} = require('electron')

  ipcRenderer.on('asynchronous-message', (event, arg) => {
    console.log(arg) // prints "ping"
  })

Опция B:

Просто создайте свое меню внутри процесса рендеринга, и вы получите доступ к объекту окна и всем остальным API-интерфейсам браузера.

С моей точки зрения, «лучшего» способа размещенияКод для создания меню в качестве основного и рендеринга имеет как положительные, так и отрицательные стороны.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...