Vue使用iframe跳转到第三方页面

<template>
  <div id="app" class="gp-leave">
    <div style="background-color:#FFF">
      <iframe
        id="my-iframe"
        :src="orderFoodUrl"
        frameborder="0"
        :style="{height: frameHeight,width: frameWidth}"
      />
    </div>
  </div>
</template>

<script>
import Constant from '../../const/Constant'
import http from '../../utils/http'
import { validatenull } from '../../utils/validate'
import CryptoJsUtil from '../../utils/CryptoJsUtil'
export default {
  name: 'OrderFood',
  data() {
    return {
      orderFoodUrl: '',
      sign: '',
      stuName: '',
      outId: '',
      scardSnr: '',
      phoneNum: '',
      screenWidth: document.body.clientWidth, // 屏幕宽度
      screenHeight: document.body.clientHeight, // 屏幕高度
      cardsnr: '',
      student: {},
      enterpriseCode: '',
      isLoading: true,
        // 三方点餐地址URL
        orderFoodUrlSF: ''
    }
  },
  computed: {
    frameHeight: function() {
      return (this.screenHeight * 0.88) - 16 + 'px'
    },
    frameWidth: function() {
      return (this.screenWidth * 0.72) + 'px'
    }
  },
  created() {
    this.toFood()
    const that = this
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        window.screenHeight = document.body.clientHeight
        that.screenWidth = window.screenWidth
        that.screenHeight = window.screenHeight
      }
    }
    // console.log(this.screenHeight);
    // console.log(this.screenWidth);
  },
  mounted() {
    // this.toFood();
  },
  destroyed() {

  },
  methods: {
    toMain() {
      this.$router.push({ path: '/' })
    },
    toFood() {
      const stu = this.$store.state.cardInfo
      const plainText = 'name=' + stu.name + '&outId=' + stu.outId + '&phoneNum=' + stu.phoneNum + '&scardsnr=' + stu.cardSnr + '&signstr=' + 'touchorder&' + 'sicnu'
      const cipherText = CryptoJsUtil.getMd5(plainText.toString())
      const paramTo = {
        cmd: 'getCustomerByCardsnr',
        poscode: Constant.POSCODE,
        cardsnr: stu.cardSnr
      }
      // debugger
      http.get(Constant.DZBP_ACTION, paramTo).then(
        response => {
          console.log(response)
          if (response.code == 1) {
            this.enterpriseCode = response.data.stuInfo[0].enterpriseCode
            // 正式开通后将tid替换为this.enterpriseCode。100020为测试环境
            // this.orderFoodUrl = `mobile/wxapp/zorderifaceh5?tid=` + this.enterpriseCode +'&name=' + stu.name + "&outId=" + stu.outId + "&scardsnr=" + stu.cardSnr + "&phoneNum=" + stu.phoneNum + "&sign=" + cipherText;
              this.orderFoodUrlSF = response.data.stuInfo[0].orderFoodUrl;
              // console.log(this.orderFoodUrlSF);
              let origin = window.location.origin;
              this.orderFoodUrl = `${origin}`+ this.orderFoodUrlSF +`?tid=` + '100013' +'&name=' + stu.name + "&outId=" + stu.outId + "&scardsnr=" + stu.cardSnr + "&phoneNum=" + stu.phoneNum + "&sign=" + cipherText;
              console.log(this.orderFoodUrl);
            this.isLoading = false
          } else {
            console.log('获取失败')
          }
        }
      )
    }
  }
}
</script>