vue iframe網頁內嵌及傳參

思路

• 通過域名傳參做並加密處理
• 內嵌頁面通過域名來接收參數並解密

外套頁面

      <iframe :src="url" scrolling="yes" background="#999" frameborder='0' height='960' width="100%"></iframe>

• js代碼

1.通過'https://kc.yuanqichuang.com/kc/login'域名后跟參數,

2.可以通過Base64來吧參數加密,防止漢字變成亂碼

3.下面代碼並沒做加密處理

      url: 'https://kc.yuanqichuang.com/kc/login?companyName=昆山環正電子有限公司&secretKey=d5f2a7f5929f9f1f49f4&time=1607585383921'

內嵌頁面

安裝

npm install --save js-base64

npm install --save babel-preset-env

引入

import { Base64 } from 'js-base64';

使用：

      let Base64 = require('js-base64').Base64
      let endata = Base64.encode(buss);//加密
      let dedata = Base64.decode(endata);//解密

• 獲取域名參數

    let strs = []
    var url = location.search; //獲取url中"?"符后的字串
    var theRequest = new Object(); // 域名參數
    if (url.indexOf("?") != -1) {
      var str = url.substr(1)
      strs = str.split("&")
      for ( var i = 0; i < strs.length; i++) {
        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1])
      }
    }
     // 調用后端接口
      this.$api.get('kcAbutment/loginHrFromKC', {
      companyName: theRequest.companyName,
      secretKey: theRequest.secretKey,
      time: theRequest.time
    }).then((res) => {
      if (res.code === 200) {
      console.log('完成跳轉')
    })

注意事項

• 接口請求中請求頭會發生改變,可以做固定處理