iframe内嵌页面——跨域通讯

我就是我 2021-11-19 15:26 501阅读 0赞

<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