集团网站设计欣赏,太原网站建设小程序,网站推广维护,花生壳动态域名申请场景需求#xff1a;
嵌入页面操作时#xff0c;通知父级页面
涉及知识点#xff1a;
contextBridge 嵌入页面可使用暴露的对象ipc-message 监听嵌入页面发送的消息webview preload 嵌入页面运行加载的脚本
问题#xff08;两种方式#xff09;
使用监听ipc-message需…场景需求
嵌入页面操作时通知父级页面
涉及知识点
contextBridge 嵌入页面可使用暴露的对象ipc-message 监听嵌入页面发送的消息webview preload 嵌入页面运行加载的脚本
问题两种方式
使用监听ipc-message需要在嵌入页面安装electron需求不允许使用contextBridge创建全局对象无法接收消息
解决思路
contextBridge暴露ipcRenderer给嵌入页面使用再用ipc-message监听收到的消息
父级页面
webview v-ifwebviewerUrl refwebviewRef classwebview srcD://child.html allowp:preloadwebViewerPreload() nodeintegration plugins disablewebsecurity
/webview
script langts setup
const webviewRef ref()
// 控制第三方页面操作栏
const initWebviewEvent () {webviewRef.value.addEventListener(dom-ready, () {// webviewRef.value.openDevTools() //打开嵌入页面的控制台})// 在此监听事件中接收嵌入页面的消息webviewRef.value.addEventListener(ipc-message, function (event: any) {if (event.channel closeWindow) {// 需要执行的代码}});
}
onMounted(() {nextTick(() {initWebviewEvent()})
})
onBeforeUnmount(() {webviewRef.value.removeEventListener(dom-ready)webviewRef.value.removeEventListener(ipc-message)
})
/scriptpreload引入本地文件(file:// 格式)
import path from path
export const webViewerPreload () {if (process.env.NODE_ENV production) {return path.join(__dirname, /preload.js)} else {return path.resolve(./src/entries/webViewer/preload.js)}
}preload.js 暴露ipcRenderer 到全局
const { contextBridge, ipcRenderer } require(electron)
// 存储全局方法
contextBridge.exposeInMainWorld(electron, {ipcRenderer: ipcRenderer
})嵌入页面 child.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlechild/title
/head
bodybutton onclickcloseWindow()关闭窗口/buttonscript typetext/javascriptfunction closeWindow(){const ipcRenderer window.electron.ipcRendereripcRenderer.sendToHost(closeWindow)}/script
/body
/html总结两种方法看了很久都没法实现后面突然想到可以结合起来可以将嵌入页面的消息发送给父级但是嵌入页面不能收消息不知道怎么解决。
