如何使用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 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 <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://ourcodeworld.com" preload="./inyector.js"></webview>

注意：你不需要将nodeintegration属性直接添加到Webview, 因为它将在需要时自动临时启用和禁用。

最后, 使用主要js文件中的javascript处理webview：

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>
    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);
});

不像以前使用iframe那样简单, 但是你看到的并非不可能。

玩得开心 ！