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

Question

我有两个应用程序，一个是 angular js 应用程序，另一个是 angular 10 个应用程序，在我的 local.I 中运行需要从 Angular 10 使用 iframe 并且需要 post 从 angular js 应用程序使用 iframe 向 Angular 10 应用程序发送一些消息。

但我无法使用以下代码验证天气 post消息是否成功，并且在发送消息时连接到新的 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 函数时添加超时也解决了这个问题。

这是 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 非常感谢您的回复:)

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

Unable to postMessage from angular js application to Angular 10 application using iframe

javascript

iframe

cross-domain

angularjs

angular