postMessage Web doesn't work as postMessage Html

[romanoscuri]

Steps to reproduce

1. Crate a new flutter project i.e. "flutter create test_postmessage".
2. Add in pubspec.yaml the dependency "web: ^1.1.1".
3. In main.dart, at the top add these lines:

import 'dart:html' as html;
import 'dart:js_interop';
import 'package:web/web.dart' as web;

4. Then go down to class _MyHomePageState and after "int _counter = 0;" add these lines:

void _sendMessageByHtml() {
html.window.parent?.postMessage({
'func': 'parentFunc',
'message': 'Sent by iframe (Html)'
}, "*");
}

void _sendMessageByWeb() {
web.window.parent?.postMessage({
'func': 'parentFunc',
'message': 'Sent by iframe (Web)'
}.toJSBox, "*".toJS);
}

5. Then after "void _incrementCounter() {" add these lines:

   _sendMessageByHtml();
   //_sendMessageByWeb();

so to have code as these shown below:

void _incrementCounter() {
_sendMessageByHtml();
//_sendMessageByWeb();
setState(() {

Note that _sendMessageByHtml() and _sendMessageByWeb() are be used mutually exclusive; this is the reason that one of them is commented. We are going to show that the first work and the second is not working.

6. Write inside project_folder/web/ a text file named "test.html" with the following content:

<script> if (window.addEventListener) { console.log(">>> addEventListener"); window.addEventListener("message", onMessage, false); }

function onMessage(event) {
var data = event.data;

if (typeof(window[data.func]) == "function") {
    window[data.func].call(null, data.message);
}

}

// Function to be called from iframe
function parentFunc(message) {
alert(">> " + message);
}
</script>

<iframe src="index.html" title="test">

</iframe>

7. Start the web application (device: Chrome (web)) in debug mode.
8. You will see the traditional Flutter demo app. Copy the url, something like "http://localhost:47546/", open in same window of Chrome a new tab and paste copied url adding "/test.html" so to have something like "http://localhost:47546/test.html" in address bar. Refresh the page. You will see the same Flutter demo page in a small frame. Press the plus (+) button: you will see in browser an aler, a popup with ">> Sent by iframe (Html)" message.
9. In main.dart change the comment so to have these lines:

void _incrementCounter() {
//_sendMessageByHtml();
_sendMessageByWeb();
setState(() {

that is commented the first call (Html) and uncommented the second call (Web).

10. Refresh the Chrome tab where you have added "/test.html" to the url and press the plus button (+). The popup is no more shown.

Expected results

web.window.parent?.postMessage() must works as html.window.parent?.postMessage()

Actual results

web.window.parent?.postMessage() does nothing

Code sample

Code sample

(in steps to reproduce you will have all the code needed as code sample)

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[Paste your output here]

[romanoscuri]

I see now that the content of the file test.html to be copied in project_folder/web is not shown correctly. I try to paste an image and the html file.

test.html

[romanoscuri]

I realize only now that I can upload a zip with all the content of the project.

test_postmessage.zip

[romanoscuri]

I think my mistake. Instead using this it works.

void _sendMessageByWebSimplified() {
web.window.parent?.postMessage("Sent by iframe (Web)".toJS, "*".toJS);
}

So I had to convert to this:

void _sendMessageByWeb() {
web.window.parent?.postMessage("""{
"func": "parentFunc",
"message": "Sent by iframe (Web)"
}""".toJS, "*".toJS);
}

and deserialize the json object from string in the parent:

    function onMessage(event) {
    console.log(">>> onMessage: " + event.data);
        var data = JSON.parse(event.data);

        if (typeof(window[data.func]) == "function") {
            window[data.func].call(null, data.message);
        }
    }

I added this comment just in case it will be useful for some other guy because documentation on right manner to use web.window.parent.postMessage() is not easy available.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.