在vue项目中引入jquery项目

目录

• 法一：a链接跳转
• 法二：iframe+postMessage跳转
  • 1.jquery项目要放在public文件夹下
  • 2.在vue中使用iframe标签
  • 3.消息传递
    • 外部vue向内部iframe发送消息
    • 内部iframe接收消息
    • 内部iframe向外部vue传递消息
    •  外部vue接收消息

 

回到顶部

法一：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,
          },
        },
        "*"
      );
    },