iframe内嵌页面——跨域通讯

2019-07-10 18:02:42 阅读：187 来源： 互联网

标签：内嵌 console 跨域 window iframeWin iframe data event

<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>

标签：内嵌,console,跨域,window,iframeWin,iframe,data,event
来源： https://www.cnblogs.com/wheatCatcher/p/11165514.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

iframe内嵌页面——跨域通讯