vue embedded iframe cross-domain communication

Recent vue3 project, using Baidu map, find iframe with .html file to guide vue in doing development more convenient, then draw on relevant information online are summarized below.

1. How Vue assembly introduction iframe?

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

如上，直接通过添加iframe标签，src属性绑定data中的src，第一步引入就完成了

2, how to get vue iframe object, and window objects within the iframe?

在vue中，dom操作比不上jquery的$('#id')来的方便，但是也有办法，就是通过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) } } </script>

Then the object is to get the window iframe, because only the object to get this thing passed to the iframe

<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 how to transmit information into the iframe?

通过postMessage，具体关于postMessage是什么，自己去google，

我的理解postMessage是有点类似于UDP协议，就像短信，是异步的，你发信息过去，但是没有返回值的，只能内部处理完成以后再通过postMessage向外部发送一个消息，外部监听message

为了让postMessage像TCP，为了体验像同步的和实现多通信互不干扰，特别制定的message结构如下

{
  cmd: '命令',
  params: {
    '键1': '值1',
    '键2': '值2' } }

The purpose of this message is distinguished by cmd

Specific code as follows

<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', this.handleMessage) this.iframeWin = this.$refs.iframe.contentWindow }, handleMessage (event) { // 根据上面制定的结构来解析iframe内部发回来的数据 const data = event.data switch (data.cmd) { case 'returnFormJson': // 业务逻辑 break case 'returnHeight': // 业务逻辑 break } } } </script>

4, how to send a message to the outside in the iframe vue?

Now "send a message to the iframe" by clicking on this button, a message has been sent to the iframe from the outside vue

{
  cmd: 'getFormJson',
  params: {}
}

So how to deal with this information inside the iframe it?

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

Send and receive information so far it has been resolved internal, external transceiver also has been resolved, go to address your question.

vue embedded iframe cross-domain communication

Guess you like