Postmessage function is not working in mobile but working in desktop

I am trying to create the widget the will have one button, when someone click on the button a popup comes. That popups contain the button too, that will do task.

Here is the popup code-

<div class="modal" id="myModal">
        <div class="modal-content">
            <span class="close-btn" id="closeModalBtn">&times;</span>
            <iframe id="modelIframe" src="base_url/modelviewer.html" style="width: 280px; height: 200px;" allow="xr-spatial-tracking" frameborder="0"></iframe>
            <p>View this product in 3D</p>
            <button id="activateAR" style="padding: 10px 10px;border: none; ">See in 3D</button> 
        </div>
    </div>

So when this poup up is visible and user click on the button (with id "activateAR"), I call the following function-

function activateARFunction() {
    console.log("data",document);
    const iframe = document.getElementById('modelIframe');
    iframe.contentWindow.postMessage('activateAR', '*');     
}


document.getElementById('activateAR').addEventListener('click', activateARFunction);

and modelviewer.html (where I am receiving the message)-

<script>
window.addEventListener('message', (event) => {
    console.log("button without data ","received");
    if (event.data === 'activateAR') {
        console.log("button ","received");
         
    }
});
</script>

When I run this code in the desktop, my modelviewer.html receive the postmessage data i.e.

console.log("button without data ","received");

However, when I run it in mobile, it does not print anything. No error in console too.

from Postmessage function is not working in mobile but working in desktop