如何使用Electron Framework从Web视图发送检索信息和操作DOM

本文概述

如何运作
实现

通常, 你可能不希望将信息从iframe发送到主文档, 而是要检索整个DOM并对其进行任何处理。但是, 对于电子框架, 你不能简单地使用iframe标签来做到这一点, 因为通常不允许这样做。相反, 你需要在文档中使用< webview> 标记在电子应用程序中呈现第三方(或你自己的)网站。
尽管使用webview没问题, 但是如果你尝试像以前那样使用iframe上的javascript来访问DOM, 那将是一个问题。你根本不能直接由于” 安全原因” 或类似原因。
但是, 你可以使用ipc-manager事件发送信息, 并可以使用webview的preload属性操作外部网站的DOM。
如何运作有了webview的preload属性, 你可以实现想要实现的目标, 该属性允许你在src加载之前注入脚本, 它指定了一个脚本, 该脚本将在来宾页面中运行其他脚本之前加载。脚本的URL协议必须是file：或asar :, 因为它将由引擎盖下的来宾页面中的require加载。当访客页面没有节点集成时, 该脚本仍然可以访问所有Node API, 但是在该脚本执行完后, Node注入的全局对象将被删除。
实现如前所述, 我们需要创建一个.js文件, 该文件将帮助我们处理从主视图发送到webview标记的消息, 并且将包含用于操纵该DOM的代码。文献。
在这种情况下, 我们的文件将是inyector.js, 它将包含以下代码：

// inyector.js// Get the ipcRenderer of electronconst {ipcRenderer} = require('electron'); // Do something according to a request of your mainviewipcRenderer.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 < webview> document.getElementById(data.id).innerHTML = data.text; }); /** * Simple function to return the source path of all the scripts in the document * of the < webview> * *@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); }

注意：要将数据从< webview> 发送到主视图, 请使用ipcRenderer中的sendToHost方法, 如第一种将JSON字符串从webview发送到主视图的方法所示。
逻辑很简单, 当从主视图触发事件时, 具有自定义名称的事件侦听器将作出反应并在< webview> 中执行该功能。要从我们的主视图触发它们, 只需使用webview.send(” identifier” , data)。
请记住, 我们需要将从inyector.js到route的路由添加到webview标记中：

< webview id="myweb" src="http://img.readke.com/220523/0Z1152246-0.jpg" preload="./inyector.js"> < /webview>

注意：你不需要将nodeintegration属性直接添加到Webview, 因为它将在需要时自动临时启用和禁用。
最后, 使用主要js文件中的javascript处理webview：

var webview = document.getElementById("myweb"); // When everything is ready, trigger the events without problemswebview.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> webview.send("request"); // alert-somethingwebview.send("alert-something", "Hey, i'm alerting this."); // change-text-element manipulating the DOMwebview.send("change-text-element", {id: "myelementID", text: "My text"}); }); // Process the data from the webviewwebview.addEventListener('ipc-message', function(event){console.log(event); console.info(event.channel); });

不像以前使用iframe那样简单, 但是你看到的并非不可能。
【如何使用Electron Framework从Web视图发送检索信息和操作DOM】玩得开心！