electron preload[通俗易懂]

electron preload[通俗易懂]背景最近手头的electron项目需要做一个报告导出的功能,导出时要弹出个页面,可让用户自行补全相应的字段。由于公司已有现成的笔录工具,现直接将其集成进来,用webview直接展示其笔录页面,将已有的值传给笔录。webview简介electron的webview标签时基于Chromiumwebview,由于Chromium的架构变化巨大,会影响electronwebview的稳定性,包括呈现、导航和事件路由。所以electron团队不建议使用webview标

背景

最近手头的 electron 项目需要做一个报告导出的功能,导出时要弹出个页面,可让用户自行补全相应的字段。

由于公司已有现成的笔录工具,现直接将其集成进来,用 webview 直接展示其笔录页面,将已有的值传给笔录。

mspaint手绘图

webview 简介

electronwebview 标签时基于 Chromium webview ,由于 Chromium 的架构变化巨大,会影响 electron webview 的稳定性,包括呈现、导航和事件路由。所以 electron 团队不建议使用 webview 标签。

注意:默认情况下,electron >= 5禁用 webview标签。 在构造 BrowserWindow 时,需要通过设置 webviewTag webPreferences选项来启用标签。

var win = new BrowserWindow({ 
   
    height: 1040,
    width: 1920,
    backgroundColor: 'radial-gradient(#1b5083, #010204)',
    webPreferences: { 
   
      webviewTag: true
    }
  })
只听到从架构师办公室传来架构君的声音:
昨日登高罢,今朝更举觞。有谁来对上联或下联?

iframe 不同, webview 独立于您的应用程序运行。 它拥有和你的页面不一样的权限并且所嵌入的内容和你应用之间的交互都将是异步的。 这将保证你的应用对于嵌入的内容的安全性。 注意: 从宿主页上调用 webview 的方法大多数都需要对主进程进行同步调用。

preload

webviewpreload 属性只支持 file: 协议

此代码由Java架构师必看网-架构君整理
<webview src="https://www.github.com/" preload="file://E:/test/preload.js"></webview>

总结

webviewpreload 只支持 file 协议,打包成 asar 后,要注意和开发环境的相对位置关系。
但是不建议使用 webview,可以新建个窗口再放外部链接。

本篇属于 electron 初识,如有表述不当,望指出改正。

参考

1. electron文档 webview篇
2. electron webview加载远程preload方法

本文来源Grassto,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/222738
0
 

发表评论