• 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)
    })
    

      

    
    
    
  • 相关阅读:
    判断当前时间为星期几
    springboot+mysql数据源切换
    表单上传图片
    po,vo,bo,dto,dao解释
    生成电脑的SSH key
    单例模式
    事物的特性和隔离级别
    springAOP自定义注解讲解
    Spring依赖注入(DI)的三种方式
    redis持久化
  • 原文地址:https://www.cnblogs.com/plBlog/p/13863628.html
Copyright © 2020-2023  润新知