iframe内嵌页面——跨域通讯

最新推荐文章于 2023-10-30 15:23:21 发布

ancu9723

最新推荐文章于 2023-10-30 15:23:21 发布

阅读量219

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wheatCatcher/p/11165514.html

版权

<template>
  <div class="act-form">
    <iframe
      :src="src"
      ref="iframe"
      frameborder="no"
      align="middle"
      width="100%"
      height="600px"
      scrolling="auto" />
    <el-button @click="sendMessage">向iframe发送信息</el-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      src: '',
      iframeWin: null,
      isLoaded: false
    }
  },
  created () {
        this.src = 'http://odp.oa.com'

　　//获取iframe
　　var oIframe=document.getElementsByTagName('iframe')[0];

　　//获取iframe中的元素
　　var oText=oIframe.contentWindow.document.getElementById('navContent');

　　//改变iframe中元素的属性
　　oIframe.contentWindow.document.getElementById('navContent').style.color='red';

  },
  mounted () {
    // 在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessage
    window.addEventListener('message', this.handleMessage)
    this.iframeWin = this.$refs.iframe.contentWindow
  },
  methods: {
    sendMessage () {
      console.log(this.iframeWin, 1111111)
      this.iframeWin.postMessage({
        cmd: 'getFormJson',
        params: {}
      }, '*')
    },
    async handleMessage (event) {
      // console.log(event, 222222)
      const data = event.data
      // console.log(data, 333333)
      switch (data.cmd) {
      case 'returnFormJson':
        break
      case 'returnHeight':
        break
      }
    },
    async enroll (data) {
      console.log('4444444')
    }
  }
}
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>iframe Window</title>
    <style>
        body {
            background-color: #D53C2F;
            color: white;
        }
    </style>
</head>
<body>

    <h1>Hello there, i'm an iframe</h1>

    <script>
        // 向父vue页面发送信息
        window.parent.postMessage({
          cmd: 'returnHeight',
          params: {
            success: true,
            data: document.body.scrollHeight + 'px'
          }
        }, '*')
        // 接受父页面发来的信息
        window.addEventListener('message', function (event) {
          var data = event.data
          switch (data.cmd) {
          case 'getFormJson':
            // 处理业务逻辑
            break
          }
        })
    </script>
</body>
</html>

　　其他案例：

<template>
  <iframe v-if="$route.query.src" :src='$route.query.src' class="iframe" ref="iframe"></iframe>
  <iframe v-else :src="urlPath" class="iframe" ref="iframe"></iframe>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
export default {
  name: 'nxframe',
  data() {
    return {
      urlPath: this.getUrlPath() // iframe src 路径
    }
  },
  created() {
    NProgress.configure({ showSpinner: false })
  },
  mounted() {
    this.load()
    this.resize()
  },
  props: ['routerPath'],
  watch: {
    $route: function() {
      this.load()
    },
    routerPath: function(val) {
      // 监听routerPath变化，改变src路径
      this.urlPath = this.getUrlPath()
    }
  },
  components: {
    ...mapGetters(['tagList']),
    tagListNum: function() {
      return this.tagList.length !== 0
    },
    ...mapState({
      name: state => state.user.name
    })
  },
  methods: {
    // 显示等待框
    show() {
      NProgress.start()
    },
    // 隐藏等待狂
    hide() {
      NProgress.done()
    },
    // 加载浏览器窗口变化自适应
    resize() {
      window.onresize = () => {
        this.iframeInit()
      }
    },
    // 加载组件
    load() {
      this.show()
      var flag = true // URL是否包含问号
      if (this.$route.query.src.indexOf('?') === -1) {
        flag = false
      }
      var list = []
      for (var key in this.$route.query) {
        if (key !== 'src' && key !== 'name') {
          list.push(`${key}= this.$route.query[key]`)
        }
      }
      list = list.join('&').toString()
      if (flag) {
        this.$route.query.src = `${this.$route.query.src}${
          list.length > 0 ? `&list` : ''
        }`
      } else {
        this.$route.query.src = `${this.$route.query.src}${
          list.length > 0 ? `?list` : ''
        }`
      }
      // 超时3s自动隐藏等待狂，加强用户体验
      let time = 3
      const timeFunc = setInterval(() => {
        time--
        if (time === 0) {
          this.hide()
          clearInterval(timeFunc)
        }
      }, 1000)
      this.iframeInit()
    },
    // iframe窗口初始化
    iframeInit() {
      const iframe = this.$refs.iframe
      const clientHeight = document.documentElement.clientHeight - 200
      iframe.style.height = `${clientHeight}px`
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          this.hide()
        })
      } else {
        iframe.onload = () => {
          this.hide()
        }
      }
    },
    getUrlPath: function() {
      // 获取 iframe src 路径
      let url = window.location.href
      url = url.replace('/myiframe', '')
      return url
    }
  }
}
</script>

<style lang="scss">
.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>

转载于:https://www.cnblogs.com/wheatCatcher/p/11165514.html

ancu9723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe内嵌页面——跨域通讯

<template> <div class="act-form"> <iframe :src="src" ref="iframe" frameborder="no" align="middle" width="100%" height="60...
复制链接

扫一扫