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

    })

注意事项

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

巴特西

vue iframe网页内嵌及传参

思路

外套页面

内嵌页面

注意事项

最新文章

热门文章