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('完成跳转')
    })

注意事项

• 接口请求中请求头会发生改变,可以做固定处理