PostMessage to nested iframe of the same domain - JavaScript

Will it be possible to send postMessage to a nested iframe ?

I have parent page [ http://localhost:8765/home.html ], I have declared postMessage function in the parent page as below snippet

// home.html [http://localhost:8765/homr.html]
<html>
<script>
    function test1(){
        document.getElementById('tableauFrame').contentWindow.postMessage("success", "*")
    }
</script>
<body>
    child ui <br>
    <iframe width='2000px' height='2000px' src='http://localhost:8766/child.html' id='tableauFrame' onload=test1()></iframe> 
</body>
</html>

Inside parent page, it will call another browser to an iframe , in child browser it has another iframe which is calling page2.

//child.html [ http://localhost:8766/child.html ]
<html>
    <body>
        <p>Child page</p>
        <iframe src='http://localhost:8766/page2.html' id='secondary'></iframe> 
    </body>
</html>

if it was just a single iframe [ parent (home.html) to child(child.html)] , it will work and receive the message , but when I tried a nested iframe parent(home.html) to grandchild[page2.html] element, it is not receiving the postMessage.

// grandchild [ http://localhost:8766/page2.html ]
<html>
    <script>
        window.addEventListener('message',function(message){
            if (event.origin === "http://localhost:8765") {
                console.log("displaying message from parent page : " + message.origin)
            }
        })
    </script>
    <body>
        <p>this is getting from 3rd page</p>
    </body>
</html>

Does postMessage only work on a single frame ?

Window messages don't "bubble down"; you can either:

In the grandchild page, listen to something on window.parent or even window.top, and handle all message posting on the topmost window; or
In the uppermost page, nest down twice: document.getElementById('tableauFrame').contentDocument.querySelector('iframe').contentWindow.postMessage("success", "*")

PostMessage to nested iframe of the same domain - JavaScript

Related

Recent Posts