Write in front: this article is the record of the problems encountered in the project development, if there is no rigorous, mistakes, welcome to add, correct ~Copy the code

Reference: juejin.cn/post/684490… Juejin. Cn/post / 684490…

Requirement: in the VUE project through iframe nested pages in other systems, now want to achieve click a button in the IFrame page, to achieve the route menu in the VUE project jump.

Demand analysis: Now vue project deployment code on http://168.168.168.168:8080, including embedded page deployment in sweetgril. Cn, thus we can analyze the problems cross-domain communication when the page, then we cross-domain communication research, Finally, the cross-document communication API is adopted: window.postMessage().

One: Why do cross-domain problems occur

Cross-domain is restricted by the same origin policy of the browser. The same origin policy is a convention. It is the core and most basic security function of the browser. If the same origin policy is absent, the normal functions of the browser may be affected. The Web is built on the same origin policy, and browsers are just an implementation of the same origin policy. The same origin policy prevents javascript scripts in one domain from interacting with content in another domain. By homology (that is, in the same domain), two pages have the same protocol, host, and port number.

Two: Cross-document communication API: window.postMessage()

MDN address: developer.mozilla.org/zh-CN/docs/… The window.postMessage() method can safely implement cross-source communication. In general, scripts with two different pages can only communicate with each other if the page executing them is on the same protocol (usually HTTPS), port number (443 is the default value for HTTPS), and host (the module document.domain of the two pages is set to the same value). The window.postmessage () method provides a controlled mechanism to circumvent this limitation and is safe as long as it is used correctly.

Grammar:

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow

A reference to another window, such as the contentWindow property of iframe, the window object returned by executing window.open, or the window.frames named or numeric index.

message

Data to be sent to other Windows. It will be serialized by a structured cloning algorithm. This means you can safely pass data objects to the target window without having to serialize them yourself.

targetOrigin

The origin property of a window specifies which window can receive message events, either as a string * (for unrestricted) or as a URI. If any of the protocol, host address, or port of the target window does not match the value provided by targetOrigin, the message will not be sent. A message will only be sent if all three match. This mechanism controls which Windows messages can be sent to; For example, this parameter is especially important when a password is sent using postMessage, and its value must be exactly the same as the Origin property of the intended recipient of the message containing the password to prevent the password from being intercepted by a malicious third party. If you know exactly which window the message should be sent to, always provide a targetOrigin with the exact value, not *. Not providing an exact target will result in data being leaked to any malicious site interested in the data.

Transfer the optional

Is a string of Transferable objects that are passed along with Message. Ownership of these objects is transferred to the receiver of the message, and ownership is no longer retained by the sender.

Other Windows can listen for distributed messages
window.addEventListener('message',receiveMessage,false); Function receiveMessage(event){// For Chrome, the origin property is in the event. Chrome without this attribute / / var origin = event. The origin | | event. The originalEvent. Origin; var origin = event.origin if (origin ! == "http://example.org:8080") return; / /... }Copy the code
The data in the message

Objects passed from other Windows

Origin of the message

The origin of the message sender window when postMessage is called. The string is a combination of protocol, ://, domain name, and: port number. For example, example.org (implied port 443), example.net (implied port 80), example.com:8080. Note that this Origin is not guaranteed to be the current or future origin of the window, as postMessage may be navigated to a different location after being called.

The source of the message

A reference to the window object from which the message was sent; You can use this to establish two-way communication between two Windows with different origins.

Three: actual code operation

1. Home. vue Is the vue page for iframe page embedding

2. Page. Vue Switch to the page after the route by clicking the iframe button

3. Configure VUE routing

4, Vue project add listening message event in main.js

5. Embedded iframe pages

Four: finally show the effect

Home in vue. Vue:

Click the first three Add buttons to switch routes. The page after switching is displayed:

Click the fourth add button, the page prompts an error message:

Thus found the window. The parent. ‘parent’ levels of postMessage and nested iframe page hierarchy relationship in communication, pay special attention to when using.

Five:

Through the attempt of the above process, the cross-domain communication between iframe page and VUE page was finally realized in the mainstream browser (internal OS: not considering IE), and the effect of switching routes was realized by clicking iframe page.