Why I'm not getting the postMessage from the top window when having my iframe in the page?

<script>
  import { onMount } from "svelte";
    let titulo = "titulo"
   Dentro de Svelte
  onMount(() => {
    var iframe = document.getElementById("app-frame");
    iframe.onload = () => {
    console.log("el iframe está cargado");
      iframe.contentWindow.postMessage({ score: 10 }, "*");
   };
  });
</script>

<h1>Welcome to SvelteKit</h1>
<!-- <p>{titulo}</p> -->
<p>
  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>
<iframe
  src="https://playcanv.as/e/p/DvhXkh4S/"
 id="app-frame"
  width="1820"
  height="800"
  title="aplicación de playCavnas"
>
  <!-- frameborder="1020"  -->
  <!-- loading="lazy"  -->
</iframe>

And this is the code from playCanvas:

var ApiText = pc.createScript(‘apiText’);

ApiText.prototype.initialize = function() {
console.log(“inicializado el script”);

window.addEventListener('message', function(e) {
    console.log("mensaje recibido", e.data);
});

};

What I’ve tried so far is to make a new whole playCanvas project and a new skeleton-project in Svelte so I can get rid off any other entity problem.

The first code is written is Svelte and I’ve used the /e in the src attribute on iframe as I saw on another topic here in the forum.

Then, from pC I’ve used an event listener for the message.

I get the console.log inicializando el script (meaning script initialized in english), I also get the “el iframe está cargado” which means “iframe is loaded” because of the onload.

But I still not getting the “e.data” from the listener, what can I do?