vue 嵌套全屏iframe 能有效避开返回两次才能返回上一个路由的问题

发布时间 2023-09-12 16:11:58作者: 风雪中de冲破
<template>
  <div class="home">
    <iframe ref="iframe" class="iframe" frameborder="no"></iframe>
  </div>
</template>

<script>
import {
  get_doctor_info,
  statistics,
  query_backlog_task,
} from "@/request/api/http.js";
import { Toast } from "vant";
export default {
  data() {
    return {
      currentDingtalk: {},
      url: "",
    };
  },

  mounted() {
    this.currentDingtalk = JSON.parse(sessionStorage.getItem("userInfo"));
    this.init();
    console.log(this.$route.query.type);
  },

  methods: {
    init() {
      if (this.$route.query.type == 3) {
        let src =
          "https://m.xiaohe.cn/tool/food/eat?utm_medium=copy_link&utm_source=lvsongguoAPP";
        this.$refs.iframe.contentWindow.location.replace(src);
      } else if (this.$route.query.type == 4) {
        let src = "https://miying.qq.com/guide-h5/home?appid=z2hospitail";
        this.$refs.iframe.contentWindow.location.replace(src);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding-bottom: calc(20px + constant(safe-area-inset-bottom));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  .iframe {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border: none;
  }
}
</style>