添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

electron vue webview preload

Electron + Vue + WebView 中使用 preload 方法:

  • 在 Electron 中创建 WebView 组件,指定 preload 属性指向预加载脚本文件;
  • 预加载脚本文件中可以访问主进程的 API;
  • 在预加载脚本中定义一个全局对象,并在 Vue 中通过 window 对象访问该对象。
  • 示例代码:

    <template>
        <webview :src="src" :preload="preloadPath"></webview>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          src: 'https://example.com',
          preloadPath: './preload.js'
    </script>
    

    preload.js:

    // 可以在预加载脚本中访问 Electron 主进程的 API
    const { ipcRenderer } = require('electron')
    // 在预加载脚本中定义全局对象
    window.example = {
      sendMessageToMainProcess (message) {
        ipcRenderer.send('message-from-webview', message)
    

    Vue 中的调用:

    window.example.sendMessageToMainProcess('message from webview')
            做什么梦呢
            Electron