本文概述
- 如何运作
- 实现
尽管使用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】玩得开心 !
推荐阅读
- 在Electron Framework中使用本机桌面通知
- 如何使用Electron Framework执行exe文件(系统应用程序)
- 使用Electron Framework监视文件和目录
- 如何使用CLI构建(发布)Electron应用程序的发行版(发布)
- 使用MediaSync的Android应用在播放视频时冻结
- Webview中的Android youtube网站正在干扰
- Android - 压缩位图,然后将其保存到SDCARD的活动结果中
- APP进入后台后才会释放内存
- 如何在chef recipe中包含application.properties文件中的属性