This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

When you’re writing the micro front end, the landing page is written by the iframe and the landing page requires iframe communication.

The communication between the main page and the page in the iframe framework varies according to whether the SRC attribute in the iframe is connected in the same domain or across domains. Data exchange and DOM element communication in the same domain are much easier, while cross-domain communication requires some clever ways.

Communication between parent and child pages in the same domain

The parent page parent. HTML

<html>
<head>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        function say() {
            alert("parent.html------>I'm at parent.html");
        }
        function callChild() {
//document.frames["myFrame"].window.say(); // Only for Internet Explorer
            myFrame.window.say();
            myFrame.window.document.getElementById("button").value = "I've changed.";
        }
    </script>
</head>
<body>
    <input type=button value="Call the function say() in child.html" onclick="callChild()">
    <iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
Copy the code

Child. The child pages HTML

<html>
<head>
    <script type="text/javascript">
        function say() {
            alert("child.html--->I'm at child.html");
        }
        function callParent() {
            parent.say();
            parent.window.document.getElementsByName("myFrame") [0].style.height = "100px";
        }
    </script>
</head>
<body>
    <input id="button" type=button value="Call the say() function in parent-.html" onclick="callParent()">
</body>
</html>
Copy the code

The method call

As shown in the above example the parent page to invoke the method of child pages by: FrameName. Window. ChildMethod (); (this way compatible with all browsers) call the parent page method child pages:. The parent window. The parentMethod ();

DOM element access

Now that we have the child window object based on framena.window, To access the DOM elements with access to the same page in the DOM elements had no difference can be through the document. The getElementById (), the document. The getElementsByName () [index]. Such as: . The parent window. The document. The getElementsByName (” myFrame “) [0], myFrame. Window. The document. The getElementById (” button “), one of the Windows can be omitted.

Matters needing attention

Be sure to wait until the Iframe is loaded. Calling methods or variables before the Iframe is loaded will result in an error. Use either of the following methods to check whether the Iframe is loaded: 1. Run the onLoad event on the Iframe. Document.readystate ==”complete”

Two, cross domain parent and child page communication method

If the iframe links to an external page, the security mechanism will not be able to use the same domain name communication mode.

The parent page passes data to the child page

The trick is to use the hash value of the location object to pass the communication data. Just add a #data string to the SRC of the parent page iframe (data is the data you want to pass). Then in the child page through some way to get the data here is ok, in fact, a common way is:

  1. In the child page, set the timer by the setInterval method, and listen for the change of location.href to obtain the above data information
  2. Then the child page can carry on the corresponding logical processing according to this data information.

The child page passes data to the parent page

The technique is to use a proxy Iframe C, which is embedded in the child page and must remain in the same domain as the parent page, and then use it to take full advantage of the first method of communication above to pass the child page data to iframeC. The next problem is how to get iframeC to pass data to the home page A. Because iframeC and the home page are in the same domain, it is much easier to pass data between them. It is A communication problem under the same domain, as discussed earlier. In this case, we can use a frequently used property window.top (or window.parent.parent), which returns a reference to the window object at the top level where the browser was loaded, so that we can directly use methods from the parent page.