webview 调用 加载页 方法通过
下面分为四个方面:
第一:web页面向客户端如何发送消息(对应如下第1点 -- 1)
第二:客户端如何接收web页面发送过来的消息(对应如下第2点 -- 2)
第三:web页面接收客户端发送过来的消息(对应如下第3点 -- 3)
第四:客户端如何向web页面发送消息 (对应如下第4点 -- 4)
注意、注意、注意:
访客页需要调用webview所在页面的方法,则需要在webview中加上属性 nodeintegration="true"
1、(web页面向客户端发送消息)访客页也就是webview中src指定的页面(浏览器页面)web端需安装electron,
npm install electron --save-dev 通过下面这个方法向客户端发送消息
// electron通讯方法(向客户端发送消息)
sendToElectronPage(sendName, params) {
if (window.require('electron')) {
let ipcRenderer = window.require('electron').ipcRenderer
ipcRenderer && ipcRenderer.sendToHost(sendName, params)
ipcRenderer.send('close')
}
},
2、(客户端监听web端发送过来的消息)在客户端页面
let webview = document.getElementById('test');
webview.addEventListener('ipc-message', (event) => { //ipc-message监听,被webview加载页面传来的信息
console.log(event.channel)//最终收到消息输出 子页面信息
})
如果设置了不生效,请在此确认是否在webview标签上设置了nodeintegration="true"的属性
3、(web端接收客户端发过来的消息)
1、接收客户端传来的信息
this.recieveInfo('aaaaaa', (event, arg) => {
console.log('监听客户端收到的名称为aaaaaa消息', arg)
//todo
})
2、(接收消息)公共方法
recieveInfo(recieveName, callback) {
if (window.require) {
const { ipcRenderer } = window.require('electron')
ipcRenderer.on(recieveName, callback)
}
},
4、(客户端向webview发送消息)
获取webview标签
let webview = document.querySelector('webview');
webview.send("sendToWebInfo",{id:1,name:'laoli'})
1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解 群号: 856402057
2、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!