我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

在上一篇iframewebview的对比中,苏南大叔描述了在electron中使用webview标签的话,会获得更大的自主权限。比如,变态需求是:在electron程序中,嵌入一个远程的第三方页面,并且实时获得这个远程页面里面的数据。这需求够变态吧,在普通的网页领域来说,是绝对不可能完成这个需求的,对吧?但是,这个需求是在electron程序中运行的,这个需求就有实现的可能性。

苏南大叔:electron程序,js如何跨域通信获得webview中的数据? - electron-webview-promise
electron程序,js如何跨域通信获得webview中的数据?(图3-1)

本文测试环境:mac/electron@5.0.8

前置阅读

本篇内容,实际上涉及到前面两篇文章,如果两篇文章碰撞后,就基本上是本文中的思路。

当然,本文并不是此需求的最好解决方案,也不会是最佳解决方案。但是,是个新颖的思路。

<webview src="https://www.baidu.com" style="width:500px;height:300px;" id="iframe1"></webview>

插入js

在渲染进程中,获得webview对象。然后,通过此webview注入jsexecuteJavaScript())。然后在宿主(渲染进程)中,拿到注入js的返回值。这个思路就脑回路比较清奇了。

var _obj = document.getElementById("iframe1");
_obj.addEventListener('dom-ready', () => {
  _ret = _obj.executeJavaScript("<code>");
});

苏南大叔:electron程序,js如何跨域通信获得webview中的数据? - webview-baidu-insertjs
electron程序,js如何跨域通信获得webview中的数据?(图3-2)

不过,需要特别注意的是:插入的js语句<code>的返回值,并不是return回来的。

比如,下面的这个promise,就拿不到返回值。注意里面的return字样。

_ret = a_obj.executeJavaScript("return document.body.outerHTML");

正确的写法是:

_ret = _obj.executeJavaScript("document.body.outerHTML");

当然,如果非要使用return的话,还可以这么写:

_ret = _obj.executeJavaScript("(()=>{return document.body.outerHTML})()");

获取返回值

executeJavaScript()函数的返回值是个promise对象。那么,获得返回值的方式,有如下几种:

.then

var _ret = _obj.executeJavaScript("document.body.outerHTML");
_ret.then(function(ret){
   console.log(ret);
});

async+await

(async () => {
  var _ret2 = await _obj.executeJavaScript("document.body.outerHTML");
  console.log(_ret2);
})();

代码总结

苏南大叔:electron程序,js如何跨域通信获得webview中的数据? - webview-baidu-insertjs-code
electron程序,js如何跨域通信获得webview中的数据?(图3-3)

范例代码如下:

newsn.net:这里是【评论】可见内容

总结

本文的思路,是几个不同代码知识点的组合。当然,这个并不是electron跨域通信的最佳方案,但是是个不错的思路,仅供参考。

感谢您支持苏南大叔的原创文章,欢迎点赞转发打赏。更多苏南大叔的electron相关博客文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   electron