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=" 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)
})