Application scenario: To use Baidu Maps in VUE, you need to use offline maps

1. First the iframe introduces the address you want to nest

2. Obtain the DOM element of ifarme from the ref given in vue

As shown in figure of the enclosing iframeWin = this. $refs. Iframe. ContentWindow [get iframe window object]

3. How can vue send a message to an iframe using the new H5 postmessage property

Note: PostMessage is a protocol similar to UDP, like SMS, it is asynchronous, you send a message, but there is no return value, you have to finish internal processing and then send a message through postMessage to the external, external listener message in order to make postMessage like TCP, In order to experience things like synchronization and to achieve multiple communication without interference

What is postmessage 👉MDN write very detailed developer.mozilla.org/zh-CN/docs/…

4. Distinguish the purpose of this message by the CMD in the second figure

{
  cmd: 'the command'.params: {
    Key '1': '1'.Key '2': 'value 2'}}Copy the code

5. The third diagram is to receive the message from the parent page can write the corresponding logic by judging the statement

6. In the first picture, it is not difficult to see that you can listen to the messages sent by the iframe

postmessage