홈>2020-12-08 18:42source

javascript - iframe을 사용하여 Angular JS 애플리케이션에서 Angular 10 애플리케이션으로 메시지를 게시 할 수 없음

나는 두 개의 응용 프로그램이 있는데 하나는 angular js 응용 프로그램이고 다른 하나는 내 로컬에서 실행되는 angular 10 응용 프로그램입니다. 신청.

하지만 아래 코드를 사용하여 날씨 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를 사용하여 메시지를 보내지 않는 이유를 알려주십시오. 또한 문제가 수신 측인지 송신 측인지 확인하는 방법도 있습니다. 이것에 대한 어떤 도움이라도 정말 감사하겠습니다. 미리 감사드립니다.

javascriptangularjsangular

답변 # 1
서로 다른 포트에서 실행되는 두 개의 애플리케이션은 실제로 서로 다른 도메인으로 간주되며 동일한 출처 정책을 통해 iframe이 차단됩니다. https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

응용 프로그램에서이 문제를 해결하려면 먼저 다음을 지정해야합니다. document.domain = "localhost" 두 애플리케이션 모두에서 서로 다른 포트에서 통신 할 수 있어야합니다.

또한 각도 응용 프로그램 내에서 HostListener 이벤트에 대한 바인딩, 즉
```
@HostListener("window:message", ["$event"]) onPostMessage(event: any) {
    if (event.origin === "http://localhost:8090") {
      console.log("message from iframe", event);
    }
```

답변 # 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 귀하의 답변에 감사드립니다 :)

Python2.net

javascript - iframe을 사용하여 Angular JS 애플리케이션에서 Angular 10 애플리케이션으로 메시지를 게시 할 수 없음

관련 자료