electron webview通信 以及 如果接受webview頁面控制台打印的值

1、在webview標簽所在的html頁面，代碼如下：

2、在被webview加載的頁面，代碼如下：

3、在webview標簽所在的html頁面的控制台輸出：

4、在被webview加載的頁面的控制台輸出：

 

上面的代碼 

 

// 在頁面
const webview = document.querySelector('webview')
webview.addEventListener('ipc-message', (event) => {
console.log(event.channel)
// Prints "pong"
})
webview.send('ping')

// 在webview
const {ipcRenderer} = require('electron')
ipcRenderer.on('ping', () => {
ipcRenderer.sendToHost('pong')
})

 

 

  webview src是第三方的網站  那么如何傳參數呢  通信呢？

 

 1. 標簽這樣寫：
  <webview id="smdh" src="www.baidu.com" 
                 :preload="preloadUrl"
                 style="width: 100%; height:100%"></webview>

// src: 這就是你的第三方鏈接

// 2.  electron端上webview 所在頁面這樣寫
 const webview = document.querySelector('#smdh')
        // webview頁面加載完畢
        webview.addEventListener('did-finish-load', (e) => {
            console.log('加載完畢')
        })
        // 接受webview頁面打印的值
        webview.addEventListener('console-message', (e) => {
            console.log('webview桌面端打印的訪客端控制台信息:', e.message)
        })
        // 接受webview頁面的值
        webview.addEventListener('ipc-message', ({channel, args}) => {
            console.log(channel, '我是webview傳遞的值', args)
        })
        webview.addEventListener('dom-ready', (e) => {
            webview.openDevTools()
            // 給webview傳值代表是桌面端使用
            webview.send('smdh-electron', 'smdh-desktop')
        })
          

 // preload: https://www.electronjs.org/docs/api/webview-tag#preload  // 非常重要 他就是執行在iwebview上的腳本，他是個JS文件，他的js代碼會注入在，webview的src的網址上，你不需要關心

// 那么問題來了 很多人想問，那我直接吧 preload引入的JS 文件代碼寫在我第三方項目網址上不一樣嗎？

// 我可以明確告訴你。如果你吧preload.js文件的代碼 寫在第三上方的網址項目上會包錯，具體錯誤就是你引入，const {ipcRenderer} = require('electron') 這個導致的一些列錯誤。反正就是node環境等問題！
報一寫fs錯誤。


// preloadUrl 是個js文件的路徑 指向一個JS 文件， 如： “./preload.js”

// 3 .preload.js 代碼：如下 無非就是通過window方式解決通信
因為下面的代碼運行在electron端說面。不是運行在web瀏覽器上所以不報錯，有node環境，web項目會是運行在瀏覽器上，無node。但是共同點就是有window
 
const {ipcRenderer} = require('electron')
window._smenv = 'electron'
ipcRenderer.on('smdh-electron', (e, message) => {
    window.smdhDesktop = message
})
window._electron_event = {
    "PING": (data) => {
        ipcRenderer.sendToHost('PING',data)
    }
}


4. 在你的第三方網站的項目里面這樣寫：如我們是vue項目就這樣接受

 在app.vue入口文件，一定是異步接收，如果值存在，你就可以保持到vuex啦。具體自己操作！
 
 created () {
     // 接受桌面端傳遞的值
      if (window._smenv === 'electron') {
        let timer = setInterval(() => {
          if (window.smdhDesktop) {
            console.log(window.smdhDesktop, 'electron的值2')
            clearInterval(timer)
          }
        }, 100)
      }
    }

  // 通過某個按鈕點擊觸發下面事件，然后進行往桌面端傳值通信

  setData () {
      window._electron_event.PING({name: '我是商盟訂貨傳遞的值'})
    }

 

 

 

 

 

// 如何接受webview src是第三方的網站頁面控制台 打印的值

const webview = document.querySelector('#smdh')
webview.addEventListener('console-message', (e) => {
    console.log('Guest page logged a message:', e.message)
})