vue内嵌iframe并跨域通信

1、Vue引入iframe：直接通过添加iframe标签，src属性绑定data中的src。<template><div class="act-form"><iframe :src="src"></iframe></div></template><script>export defa...

zj靖

12137人浏览 · 2019-04-12 17:30:12

zj靖 · 2019-04-12 17:30:12 发布

1、Vue引入iframe： 直接通过添加iframe标签，src属性绑定data中的src。

<template>
  <div class="act-form">
    <iframe :src="src"></iframe>
  </div>
</template>
<script>
export default {
  data () {
    return {
      src: 'src地址'
    }
  }
}
</script>

2、vue获取iframe对象以及iframe内的window对象： 通过ref获取

<template>
  <div class="act-form">
    <iframe :src="src" ref="iframe"></iframe>
  </div>
</template>
<script>
export default {
  data () {
    return {
      src: 'src地址'
    }
  },
  mounted () {
    // iframe的对象
    console.log(this.$refs.iframe)
    // iframe的window对象
    console.log(this.$refs.iframe.contentWindow)
  }
}
</script>

3、vue向iframe内传送信息： 通过postMessage

<template>
  <div class="act-form">
    <iframe :src="src" ref="iframe"></iframe>
    <div @click="sendMessage">向iframe发送信息</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      src: 'src地址',
      iframeWin: {}
    }
  },
  methods: {
    sendMessage () {
      // 外部vue向iframe内部传数据
      this.iframeWin.postMessage({
        cmd: 'getFormJson',
        params: {}
      }, '*')
    }
  },
  mounted () {
    // 在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessage
    window.addEventListener('message', event => {
    	 // 根据上面制定的结构来解析iframe内部发回来的数据
	    const data = event.data
	    switch (data.cmd) {
	      case 'returnFormJson':
	        // 业务逻辑
	        break
	      case 'returnHeight':
	        // 业务逻辑
	        break
	    }
    });
    this.iframeWin = this.$refs.iframe.contentWindow
  }
}
</script>

4、iframe内向外部vue发送信息：

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^