在vue项目中引入jquery项目
法一:a链接跳转
window.location.href = 'http://127.0.0.1:5500/trtc-calling-web(1)/trtc-calling-web/src/meeting/index.html'
跳转的url为jquery项目运行之后的url,相当于这是两个项目,各自有各自的端口
法二:iframe+postMessage跳转
1.jquery项目要放在public文件夹下
2.在vue中使用iframe标签
<template> <div> <iframe ref="myiframe" name="myiframe" class="iframe" id="myiframe" style="width: 100%; height: 100%" :src="`/meeting.html?userId=${loginUserInfo.userId}`" frameborder="0" scrolling="no" >iframe> div> template>
说明:/meeting.html为oublic文件夹下的路径
3.消息传递
跳转的时候带参数(?id=123),或者postMessage
外部vue向内部iframe发送消息
let query1 = this.$route.query.event; let query2 = this.$route.query.userId; let query3 = this.$route.query.roomId; document.getElementById("myiframe").onload = function () { document.getElementById("myiframe").contentWindow.postMessage( { cmd: query1, params: { userId: query2, roomId: query3, }, }, "*" ); };
内部iframe接收消息
window.addEventListener('message', (e) => { switch(e.data.cmd) { case 'create': $('#userId').val(e.data.params.userId) $('#roomId').val(e.data.params.roomId); } }, false)
内部iframe向外部vue传递消息
window.parent.postMessage({ cmd: 'loginsuccess', params: {} }, "*")
外部vue接收消息
window.addEventListener("message", (e) => { console.log("父组件接收消息, 登陆成功", e); switch (e.data.cmd) { case "loginsuccess": var view2 = document.getElementsByClassName("view")[0]; view2.style.width = "1239px"; view2.style.height = "827px"; break case "leave": this.$router.push("/"); break case 'close': this.$router.push("/"); break } });
postMessage还有一种方法也可,点击按钮调用sendMessage发送消息,
note:mounted直接调用sendMessage方法无效,this.$nextTick(function(){}),setTimeout也无效
<button @click="sendMessage">按钮button>
this.iframeWin = this.$refs.myiframe.contentWindow;
sendMessage() { // 外部vue向iframe内部传数据 this.iframeWin.postMessage( { cmd: this.$route.query.event, params: { userId: this.$route.query.userId, roomId: this.$route.query.roomId, }, }, "*" ); },