无法使用 iframe 将消息从 angular js 应用程序发送到 Angular 10 应用程序

Question

I have two applications, one is angular js application and other is angular 10 application which are running in my local.I need to access a page from Angular 10 using iframe and need to post some message to the Angular 10 application using iframe from angular js应用。

但我无法验证使用下面的代码天气 postMessage 是否成功，并且在发送消息时连接到新的 Angular 应用程序是否有任何问题。 应用程序的控制台中没有错误。

Angular JS 应用程序代码：这是在本地端口 8090 上运行的。在一个名为 index.js 的文件中添加了以下代码。

var iframeUrl = "http://localhost:4200/indexing";
var htmlContent =  "<iframe id='myframe' src="+iframeUrl+" "+"frameBorder='0'"+ "></iframe>";
newElement = angular.element(htmlContent);
$compile(newElement)($scope);
element.replaceWith(newElement);
var ifrmaeWindow= newElement.get(0).contentWindow; // Getting iframe window object
ifrmaeWindow.postMessage('Hello World!','http://localhost:4200/');

新的 Angular 10 应用程序：此应用程序在本地端口 4200 上运行。下面是 index.html 中添加的侦听器代码

<script> 
      window.addEventListener("message",function(message){
       console.log("Received msg in angular="+message.origin);
       console.log("Received msg in angular="+message.data);
      },false);
</script> 

请让我知道此代码流中有什么问题以及为什么它不使用 postMessage 发送消息。 另外我如何验证问题是在接收端还是发送端。 对此的任何帮助将不胜感激。 提前致谢。

Answer 1

在不同端口上运行的两个应用程序实际上被认为是不同的域，并且 iframe 将通过同源策略被阻止： https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

为了在您的应用程序中解决这个问题，您应该首先尝试在两个应用程序中指定document.domain = "localhost" ，然后它们应该能够在不同端口上进行通信

此外，在您的 angular 应用程序中，您可能会发现为事件添加HostListener绑定更容易，即

@HostListener("window:message", ["$event"]) onPostMessage(event: any) {
    if (event.origin === "http://localhost:8090") {
      console.log("message from iframe", event);
    }

Answer 2

添加到 chrismclarke ans，在调用 postMessage function 时也添加了超时解决了这个问题。

这是 Angular js 应用程序中的代码块。

try{
                         var ifrmaeWindow= newElement.get(0).contentWindow;
                         setTimeout(function(){ ifrmaeWindow.postMessage(jwToken,'http://localhost:4200/indexing'); }, 5000);
                         console.log("message posted");
                     }catch (e) {
                         console.log("Exception=="+e.message);
                     }

@chrismclarke 非常感谢您的回复:)