Examples of communications

parent:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>MathJax v3 with interactive TeX input and HTML output</title>
    <script src="./js/jquery.min.js"></script>
</head>

<body>

    <iframe id="child" src='./child.html' width="800" height="600px" onload="echartIframeOnLoad()"></iframe>
    <script>
        function echartIframeOnLoad(e) {
            document.getElementById('child').contentWindow.postMessage(
                '我是你爸爸3',
                '*'
            );
        }
        $(function () {
            document.getElementById('child') .contentWindow.postMessage (
                 ' I am your father. 1 ' ,
                 ' * ' 
            ); 
        }); 
        the setTimeout (() => { 
            document.getElementById ( ' Child ' ) .contentWindow.postMessage (
                 ' I am your father 2 ' ,
                 ' * ' 
            ); 
        }, 500 ) 
        window.addEventListener ( ' Message ' , function (E) {
             //console.log ( 'received message, child says') 
            var D = e.data;   // e.data which has passed all of the parameters can do their own their own judgment based on the parameters 
            the console.log (D); 
        }, to false );
     </ Script > 
    </ Script > 
</ body > 

</ HTML >

child:

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <script type="text/javascript">
        window.addEventListener('message', function (e) {
            var d = e.data;  //e.data which has passed all of the parameters can do their own their own judgment based on the parameters 
            top.postMessage (
                {
                    mess: d,
                    from: 'child'
                },
                '*'
            );
        });
    </script>
</body>

</html>

result:

News, "I said your father 1" must not receive. "I am your father 2", when the speed is very poor, also could not. Therefore, the parent window must wait until after the iframe is loaded, you can send a message!

iframe pit

Examples of communications

parent:

child:

result:

Guess you like