使用场景

Electron 内置 Chromium 和 Node.js，为了提升用户体验，通常 Electron 封装的前端静态文件存储在客户端本地。但总有一些特殊情况，会使用到部分远程页面。

比如微信扫码登录，需要远程访问微信的登录站点，获得扫码结果后跳转到我们自己的服务器，然后通知到主进程来关闭对应的渲染进程。目前这个问题有更高效的解决方案，详见博文《无刷新微信扫码登陆解决方案》。

再比如，部分页面还没有实现前后端分离，为了产品尽快上线，也需要嵌入远程URL。

直接在Electron中访问远程地址是有风险的，控制远程地址切回本地页面也是较为繁琐的。

以上需求可以使用webview标签实现。这是Electron为我们提供的一个特殊组件，类似于iframe但跟iframe不同，确保了应用的安全性。类似于Android、ios的webview或Crosswalk，Electron中的webview也支持和渲染进程相互通讯。

具体实现示例

载入父级页面的时候，将此webview悄悄放入。这样就实现在后台加载webview里面链接的内容了。

// 示意代码 （Vue）
<template v-for="(item, index) in list">
  <webview :key="index" :id="'webview' + index" :src="'https://' + item" class="hidden"></webview>
</template>

webview.hidden {
  width: 0px;
  height: 0px;
  flex: 0 1;
}

webview.show {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999999999;
  right: 0;
  bottom: 0;
}

webview.backhome {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 160px;
  z-index: 999999999999;
}

对应的显示和隐藏事件：

// 示意代码
buttomClick (id) {
  this.nowWebviewId = id
  document.getElementById(id).classList.remove('hidden');
  document.getElementById(id).classList.add('show');
}

backToHome (id) {
  document.getElementById(id).classList.remove('show');
  document.getElementById(id).classList.add('hidden');
  this.nowWebviewId = null
}

当用户点击对应按钮的时候，页面可能已经加载完毕，用户体验极佳。