Как отправлять-извлекать информацию и управлять DOM из веб-просмотра с помощью Electron Framework

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

Хотя использование webview не является проблемой, это будет, если вы попытаетесь получить доступ к DOM, как вы делали это раньше, обычно с помощью javascript в iframe. Вы просто не можете напрямую из-за «соображений безопасности» или чего-то в этом роде.

Тем не менее, вы можете отправить информацию, используя ipc-manager события и манипулировать DOM внешнего сайта с использованием preload Атрибут веб-просмотра.

Как это работает

То, чего вы хотите добиться, станет возможным благодаря атрибуту preload веб-просмотра, который позволяет вам внедрить скрипт перед загрузкой src, он определяет скрипт, который будет загружен до запуска других скриптов на гостевой странице. Протокол URL скрипта должен быть либо file: или же asar:, потому что он будет загружен по требованию в гостевой странице под капотом. Если гостевая страница не имеет интеграции узлов, этот сценарий будет по-прежнему иметь доступ ко всем API-интерфейсам Node, но глобальные объекты, внедренные Node, будут удалены после завершения выполнения этого сценария.

Реализация

Как уже было сказано, нам нужно создать .js файл, который поможет нам обрабатывать сообщения, которые мы отправим из основного представления в наш тег webview, и будет содержать код, который мы будем использовать для манипулирования DOM документа.

В этом случае наш файл будет inyector.js и он будет содержать следующий код:

// inyector.js
// Get the ipcRenderer of electron
const {ipcRenderer} = require('electron');
// Do something according to a request of your mainview
ipcRenderer.on('request', function(){
ipcRenderer.sendToHost(getScripts());
});
ipcRenderer.on("alert-something",function(event,data){
alert(data);
});
ipcRenderer.on("change-text-element",function(event,data){
// the document references to the document of the
document.getElementById(data.id).innerHTML = data.text;
});
/**
* Simple function to return the source path of all the scripts in the document
* of the
*
*@returns {String}
**/
function getScripts(){
var items = [];
for(var i = 0;i < document.scripts.length;i++){
items.push(document.scripts[i].src);
}
return JSON.stringify(items);
}

Замечания: отправить данные из для основного представления используйте метод sendToHost из ipcRenderer, как показано в первом методе, который отправляет строку JSON из веб-представления в основное представление.

Логика проста, прослушиватель событий с пользовательским именем будет реагировать и выполнять функцию в тот момент, когда событие запускается из нашего основного представления. Чтобы вызвать их из нашего основного вида, просто используйте webview.send("identifier",data),

Помните, что нам нужно добавить маршрут из inyector.js в атрибут preload в теге webview:

Замечания: вам не нужно добавлять атрибут nodeintegration непосредственно в веб-представление, так как он будет временно включен и отключен при необходимости автоматически.

Наконец, обработайте веб-просмотр с помощью javascript в вашем основном js-файле:

var webview = document.getElementById("myweb");
// When everything is ready, trigger the events without problems
webview.addEventListener("dom-ready", function() {
// Show devTools if you want
//webview.openDevTools();
console.log("DOM-Ready, triggering events !");
// Aler the scripts src of the website from the
webview.send("request");
// alert-something
webview.send("alert-something", "Hey, i'm alerting this.");
// change-text-element manipulating the DOM
webview.send("change-text-element",{
id: "myelementID",
text: "My text"
});
});
// Process the data from the webview
webview.addEventListener('ipc-message',function(event){
console.log(event);
console.info(event.channel);
});

Это не так просто, как вы делали раньше с обычными iframes, но это не невозможно, как вы можете видеть.

Повеселись !