获取url参数并转为对象-iframe

1.获取URL参数并转换成对象

2.解析url参数为对象

3. iframe解决跳转登录界面问题

4. js如何准确获取当前页面url网址信息

5. vue 给iframe设置src_vue项目iframe的传值问题

6. iframe通过URL传参到子html页面

<!--
  FilePath: /src/components/inner-frame.vue
  Project: xxx
  CreatedAt: 2020-03-07 00:32:24
  CreatedBy: 666
  Copyright: (c) 2020
  Task: #1
  iframe非普通html页面
-->

<template>
  <iframe
    :src="decodeURIComponent(src)"
    allowfullscreen="true"
    frameborder="0"
    marginheight="0"
    marginwidth="0"
    ref="iframe"
    scrolling="auto"
  ></iframe>
</template>
<script>
export default {
  name: 'inner-frame',
  props: {
    src: {
      type: String,
      required: true,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
iframe {
  border: none;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>

-------------------------------------------------------------------------------------

<!--
  FilePath: \src\views\device\device\sas\sas.vue
  Project: xxx
  CreatedAt: 2021-05-18 16:47:29
  CreatedBy: 666
  Copyright: (c) 2021
  Task: #1
  父级页面
-->

<template>
  <inner-frame
    height="100%"
    id="sasManageIframe"
    name="sasFrame"
    ref="frame"
    src="http://localhost:18080/#/strategy/dpi?header=false&footer=false&id=strategy&value=0"
    style="border: none;"
    width="100%"
  ></inner-frame>
</template>

<script>
import innerFrame from '@c/inner-frame.vue'

export default {
  components: { innerFrame },
  data() {
    return {}
  }
}
</script>

<style>
</style>

-----------------------------------------------------------------------------------------

<!--
  FilePath: /src/app.vue
  Project: xxx
  CreatedAt: 2019-03-07 00:53:53
  CreatedBy: 666
  Copyright: (c) 2019
  Task: #1
  所有视图入口.---子级页面
-->

<template>
  <div>
    <lock-dialog
      :opacityOverlay="opacityOverlay"
      :overlay="overlay"
      v-model="$lockStatus"
    >
      <template v-slot:login-form>
        <v-form ref="form">
          <v-text-field
            :label="$t('system.login.username')"
            disabled
            prepend-inner-icon="person"
            v-model="$me.name"
          ></v-text-field>
          <v-text-field
            :append-icon="passwordShow?'visibility':'visibility_off'"
            :autofocus="true"
            :label="$t('system.login.password')"
            :rules="passwordRules"
            :type="passwordShow?'text':'password'"
            @click:append="passwordShow = !passwordShow"
            @keydown.enter="login"
            autocomplete="false"
            prepend-inner-icon="lock"
            required
            v-model="password"
          ></v-text-field>
        </v-form>
        <div
          style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0;"
        >
          <span
            style="font-size: 15px; color: #FFCC80;"
          >{{$t('system.login.lockedBottom')}}</span>
          <div>
            <v-btn @click="signout">{{$t('common.signout')}}</v-btn>
            <v-btn
              @click="login"
              color="primary"
              style="background: #1976d2; margin-left: 8px;"
            >{{$t('system.login.signin')}}</v-btn>
          </div>
        </div>
      </template>
    </lock-dialog>
    <router-view></router-view>
  </div>
</template>

<script>
import lockDialog from '@c/core/lock-dialog'
import userMixin from '@mixins/store/user'
import appMixin from '@mixins/store/app'
import { authorization } from '@api/core'
import { router } from '@/settings'
import { logoutFed } from '@/utils/auth'

export default {
  components: { lockDialog },
  data() {
    return {
      overlay: true,
      opacityOverlay: false,
      passwordShow: false,
      password: '',
      toggle: true,
      timer: null,
      path: '',
      interval: 1000,
      passwordRules: [v => !!v || this.$t('system.login.incorrectPassword')],
      basicData: [],
      stopFlag: false,
      result: {}
    }
  },
  mixins: [userMixin, appMixin],
  watch: {
    // 锁屏监听
    $lockStatus: {
      handler(val) {
        if (val) {
          if (!this.toggle) {
            clearInterval(this.timer)
            this.toggle = true
          }
        } else {
          switch (this.$lockTime) {
            case 0:
              if (!this.toggle) {
                clearInterval(this.timer)
                this.toggle = true
              }
              break
            default:
              if (this.toggle) {
                this.timer = setInterval(this.checkTimeout, this.interval)
                this.toggle = false
              }
              break
          }
        }
      }
    },
    $lockTime(val) {
      if (!this.$lockStatus) {
        switch (val) {
          case 0:
            if (!this.toggle) {
              clearInterval(this.timer)
              this.toggle = true
            }
            break
          default:
            if (this.toggle) {
              this.timer = setInterval(this.checkTimeout, this.interval)
              this.toggle = false
            }
            break
        }
      }
    }
  },
  methods: {
    // 锁屏相关
    async login() {
      const validate = this.$refs.form.validate()
      if (!validate) {
        return
      }
      let data
      try {
        data = await authorization.login(this.$me.name, this.password)
      } catch (err) {
        // eslint-disable-next-line
        console.log(err)
      }
      if (data && data.token) {
        const token = data.token
        await this.$setUserToken(token)
        this.password = ''
        this.$setAppLockStatus(false)
      }
    },
    checkTimeout() {
      if (
        this.path === '/login' ||
        this.path === '/situation' ||
        this.path === '/dashboard'
      ) {
        return
      }
      let timeOut = this.$lockTime * 60 * 1000
      let currentTime = new Date().getTime()
      if (currentTime - this.$lastTime > timeOut) {
        this.$setAppLockStatus(true)
      }
    },
    async signout() {
      this.$router.push({ name: router.login })
      logoutFed()
    },
    // url参数解析 => 对象
    -------------------------------------------------
    getQueryParams() {
      const obj = {}
      const polUrls = window.location.href.split('?')
      if (polUrls[1]) {
        const arr = polUrls[1].split('&')
        if (arr.length) {
          arr.forEach(item => {
            let temp = item.split('=')
            let key = temp[0]
            let value = temp[1]
            obj[key] = value
          })
        }
        return obj
      }
    }
  },
  created() {
    // 监听键盘鼠标事件
    this.$setLastTime(new Date().getTime())
    window.document.addEventListener('mousedown', () => {
      this.$setLastTime(new Date().getTime())
    })
    window.document.addEventListener('keydown', () => {
      this.$setLastTime(new Date().getTime())
    })
  },
  -------------------------------------
  //iframe获取isa所传url参数
  mounted() {
    this.result = this.getQueryParams()
    if (this.result != null) {
      sessionStorage.setItem('result', JSON.stringify(this.result))  //将this.result保存在sessionStorage
    }

    // window.addEventListener(
    //   'message',
    //   function (e) {
    //     console.log(e.data)
    //     // console.log(e.origin, e.data) //子页面接收参数
    //   },
    //   false
    // )
  }
}
</script>