Как я могу получить доступ к DOM <webview> в Electron?

Я только начинаю с Electron, с предыдущим опытом работы с node-webkit (nw.js).

В nw.js я смог создать iframe и затем получить доступ к DOM указанного iframe, чтобы получить такие вещи, как title, favicon и т. Д. Когда несколько дней назад я взял Electron для переноса на него своего приложения nw.js, я увидел совет использовать веб-просмотры вместо фреймов просто потому, что они были лучше. Теперь, функциональность, которую я упомянул выше, была относительно проста в nw.js, но я не знаю, как это сделать в Electron (и примеры невелики). Кто-нибудь может помочь?

Кроме того, у меня есть кнопки "назад" / "вперед" для моего веб-просмотра (и я намерен иметь более одного). В документации я видел, что я могу вызывать функции для этого в веб-просмотре, но ничего из того, что я пробовал, тоже не сработало (и я не нашел примеров их использования в дикой природе).

Источник

3 ответа

Решение

Помимо гостевого для размещения вызовов IPC как NetOperator Wibby, также очень полезно переходить от хоста к гостю. Единственный способ сделать это в настоящее время - использовать .executeJavaScript (code, userGesture). Этот API немного сырой, но он работает.

Если вы работаете с удаленным гостем, например, "расширяете" стороннюю веб-страницу, вы также можете использовать атрибут предварительной загрузки веб-просмотра, который выполняет ваш пользовательский сценарий до запуска любых других сценариев на странице. Просто обратите внимание, что api предварительной загрузки по соображениям безопасности обнулит все функции, созданные в корневом пространстве имен вашего пользовательского файла JS, когда ваш пользовательский сценарий завершится, однако этот процесс хранения не будет уничтожать любые объекты, которые вы объявляете в корне. Поэтому, если вы хотите, чтобы ваши пользовательские функции сохранялись, объедините их в одноэлементный объект, и ваши пользовательские API сохранятся после полной загрузки страницы.

[обновление] Вот простой пример, который я только что закончил писать: https://github.com/JavaScriptDude/Electron-Webview-Host-to-Guest-RPC-Sample

Источник

Я не знаю, кто проголосовал, чтобы закрыть мой вопрос, но я рад, что он не прошел. У других людей этот вопрос есть и в других местах онлайн. Я также объяснил, чего я хотел достичь, но ж / д.

Я в конечном итоге с помощью ipc-message, Документация могла бы использовать больше примеров / объяснений для непрофессионала, но эй, я понял это. Мой код здесь и здесь, но я также опубликую примеры ниже, если мой код исчезнет по любой причине.

Этот код находится в aries.jsи этот файл включен в главную страницу рендерера, которая index.html,

var ipc = require("ipc");
var webview = document.getElementsByClassName("tabs-pane active")[0];

webview.addEventListener("ipc-message", function (e) {
  if (e.channel === "window-data") {
    // console.log(e.args[0]);

    $(".tab.active .tab-favicon").attr("src", e.args[0].favicon);
    $(".tab.active .tab-title").html(e.args[0].title);
    $("#url-bar").val(e.args[0].url);

    $("#aries-titlebar h1").html("Aries | " + e.args[0].title);
  }

  // TODO
  // Make this better...cancel out setTimeout?
  var timer;

  if (e.channel === "mouseover-href") {
    // console.log(e.args[0]);
    $(".linker").html(e.args[0]).stop().addClass("active");

    clearTimeout(timer);

    timer = setTimeout(function () {
      $(".linker").stop().removeClass("active");
    }, 1500);
  }
});

Следующий фрагмент кода находится в browser.js, и этот файл вводится в мой <webview>,

var ipc = require("ipc");

document.addEventListener("mouseover", function (e) {
  var hoveredEl = e.target;

  if (hoveredEl.tagName !== "A") {
    return;
  }

  ipc.sendToHost("mouseover-href", hoveredEl.href);
});

document.addEventListener("DOMContentLoaded", function () {
  var data = {
    "title": document.title,
    "url": window.location.href,
    // need to make my own version, can't rely on Google forever
    // maybe have this URL fetcher hosted on hikar.io?
    "favicon": "https://www.google.com/s2/favicons?domain=" + window.location.href
  };

  ipc.sendToHost("window-data", data);
});

Я не нашел надежного способа внедрить jQuery в <webview>s, и я, вероятно, не должен, потому что страница, которую я бы вставлял, может уже иметь ее (на случай, если вам интересно, почему мой основной код - jQuery, но есть и обычный JavaScript).

Источник

Это относится к предыдущему ответу (я не могу комментировать): Важная информация относительно ipc модуль для пользователей Electron 1.x:

Модуль ipc был разделен на два отдельных модуля:

  • ipcMain для основного процесса
  • ipcRenderer для процесса рендеринга

Таким образом, приведенные выше примеры необходимо исправить, а не

// Outdated - doesn't work in 1.x    
var ipc = require("ipc");

использовать:

// In main process.
var ipcMain = require('electron').ipcMain

А также:

// In renderer process.
var ipcRenderer = require('electron').ipcRenderer

См. http://electron.atom.io/blog/2015/11/17/electron-api-changes раздел "Разделение модуля ipc".

Источник
Другие вопросы по тегам