This is my first time to try to build an app having both LWC and VF. Thus I refer below links for exploring:

Link 1 from SalesforceExchange
Link 2 from Salesforce Developer

Then I have my VF Page:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" >

    <p>VF Page</p>

    <input id="tempMessage" type="text"/>
    <button onclick="sendToLC()">Send to LC</button>

    <p id="receiveFromLWC">Received Message from LWC</p>
    <script>
        var toSource = **"https://abc--minh.lightning.force.com";**
        
        function sendToLC() {
                var message = document.getElementById("tempMessage").value;
                window.parent.postMessage(message, toSource);
        }
    </script>

    <script>

        var lexOrigin = **"https://abc--minh.lightning.force.com";**
        window.addEventListener("message", function(event) {

            if (event.origin !== lexOrigin) {
                // Not the expected origin: reject message!
             return;
            }
            else{
                var receivedMessage = document.getElementById("receiveFromLWC");
                receivedMessage.innerHTML = "Received from LWC: " + event.data;
            }
        });

    </script>

</apex:page>

My LWC:
HTML:

<template>
        <lightning-input type="text" placeholder="Type here to send text to VF Page" onchange={handleInputChange}></lightning-input>
        <lightning-button label="Send to VF" onclick={sendData}></lightning-button>        
        <br>
        <p>Received Message from VF: {messageFromVF}</p>
        <br>
        <br>
        <iframe id="vfFrame" src={vfHost} height="100%" width="100%"> . 
        </iframe>

</template>

JS: ``` import { LightningElement, track} from 'lwc';

export default class TestCommunicationLWC extends LightningElement {

**vfHost = 'https://abc--minh--c.cs2.visual.force.com/apex/testPage';**
**origin = 'https://abc--minh--c.cs2.visual.force.com';**

@track messageFromLWC;
@track messageFromVF;

constructor() {
    super();

    this.template.addEventListener('message', function(event) {
        alert("from VF constructor" + event);
        if (event.origin !== origin) {
            // Not the expected origin: Reject the message!
            return;
        }
        else{
            this.messageFromVF = event.data;
        }
        // Handle the message
        alert("from VF constructor" + event.data);
    }, false);
}

// adding a callback to see if this works
connectedCallback(){

    this.template.addEventListener('message', function(event) {
        alert("from VF connnect" + event);
        if (event.origin !== origin) {
            // Not the expected origin: Reject the message!
            return;
        }
        else{
            this.messageFromVF = event.data;
        }
        // Handle the message
        alert("from VF connect" + event.data);
    }, false);
}

handleInputChange(event){
    this.messageFromLWC = event.detail.value;
}

sendData(){
    this.template.querySelector('iframe').contentWindow.postMessage(this.messageFromLWC, this.origin);
}

}

Metadata

47.0 true lightning__AppPage lightning__RecordPage lightning__HomePage ``` But the problem is when I run in Edge, it can send the information from LWC to VF but LWC could not receive the message from VF Page. In contrast, in Chrome, there is no received information from both ways.
**From Chrome and there is no responses from LWC and VF** [![From Chrome and there is no responses from LWC and VF][3]][3]

**From Edge and there is only one way communication from LWC to VF** [![From Edge and there is only one way communication from LWC to VF][4]][4]

Please help to advise why there is a big difference in behavior of Chrome and Edge and the solutions to make LWC and VF to communicates both ways in both Chrome and Edge. Thanks.