background
The project has nested another system’s page with iframe. Now we don’t want the title of that page, we need to remove it.
Basic knowledge
The father sends messages to the son
Iframe from father to son message transfer (refer to the iframe page to the inside of the iframe content page message) : this. $refs [‘ multiIframe] contentWindow. PostMessage (data, ‘*’)
The son brings news to the father
Iframe child to the parent message transfer (iframe content page to reference the iframe page message) window. The parent. PostMessage (data, ‘ ‘) or Windows. PostMessage (data, ‘ ‘) If parent is used without parent, the parent cannot receive the listener directly as window.addeventListener. This.$refs[‘ multiIframe ‘].contentWindow Note that one of the most important things about PostMessage is that the window that PostMessage goes out of is the same window as the window that addEventListener goes out of.
Previous error correction
The argument window.addeventListener (‘ message ‘,fun) in postMessage, the first item must be ‘message’. It is important to note that I have always made a mistake in judging which postMessage is coming out by window.addEventListener before, which led to writing low-level error code. The ‘message’ parameter in window.addeventListener (‘ message ‘,fun) is written as the parameter I posted, such as window.addeventListener (‘ aaa ‘,fun). In fact, it is judged by the parameters obtained by data in event in Fun (Evernt). As long as the page exists, messages sent globally will enter FUN, which needs to be judged and processed by event. Data in Fun.
Vue scaffolding in combination with points to pay attention to
This time there is a requirement that a current VUE page needs to be nested with another system’s page, which is implemented through iframe. Pure nesting is fine. The problem is that if you need to change some of the styles of the nested page, such as hiding the header of the page, there is a problem. The problem is that although we fetch from the onload of iframe, there will be a case that the current page is loaded, but the page in iframe is not loaded. The mounted stage in iframe is used to determine when the DOM in iframe is generated. Therefore, a nested child element of iframe is required to notify the parent element that the PAGE DOM exists.
So do the following:
The parent page of the nested IFrame adds in computed the time to receive child page messages addEvnetListener; After mounted, a sub-page sends a DOM generated message in the postMessage format. After receiving the message from the child page, the parent page sends instructions (via postMessage) to the child page to modify the page. Add a function addEventListener in Mounted to perform dom operations.
Mounted from the parent page to the child page.
When a message is sent in mounted, the addEventListener in the child page is not executed. Note that the addEventListener needs to be received before the postMessage is sent.