如何在 Angular 16 应用程序中监听 javascript 回调

Question

我正在尝试使用 iFrame 将我的 Angular 16 应用程序与第三方网站集成。我的问题是如何从他们的网站捕获回调响应？

从 html 页面与其 API 集成的建议方法是使用 iframe，如下所示：

<iframe
        id='iframe'
        src='<%=theirURL %>'
        allowfullscreen
        style="width:80%; height:800px;"
        ></iframe>

用户在 iframe 中完成某些步骤后，应该回调此脚本：

<script>
    window.addEventListener("message", receiveMessage, false);
    function receiveMessage(event) {
        console.log(event);
        //I want to call my angular function with the event from here    
    }</script>

我能够通过在我的 component.ts 文件中执行此操作来加载 iframe：

ngAfterViewChecked () {
  var myElement = document.getElementById("myiframe");
  if (myElement !== null) {
    document.getElementById("myiframe").setAttribute("src",this.iFrameURL);
  }
}

这在我的 component.html 文件中：

<iframe
    id='myiframe'
    allowfullscreen
    style="width:80%; height:800px;"
    >
</iframe>

但是 Angular 删除了 script /script 标签。 如何监听回调函数，然后使用事件数据调用我的角度函数？

我尝试了一些不同的东西。

1. 这给出了一个错误：我怀疑这是因为找不到 .js 文件。但错误表示：拒绝执行脚本，因为其 MIME 类型（'text/html'）不可执行，并且启用了严格的 MIME 类型检查。我的 console.log 消息没有记录在控制台中。

在组件的构造函数中：

    this.myScriptElement = document.createElement("script");
    this.myScriptElement.type="text/javascript";
    this.myScriptElement.src = "./myfile.js";
    document.body.appendChild(this.myScriptElement);

在 myfile.js 中（与组件位于同一目录中）：

    window.onload = function () {
      console.log('adding event listener in window.onload');
      window.addEventListener("message", receiveMessage, false);
    }

function receiveMessage(event) {
    console.log(event);
    window.dispatchEvent(event);
}

它没有走到这一步，但在我拥有的组件内部：

  @HostListener('window:MessageEvent', ['$event.detail'])
  onCallAngularService (detail: any) {
    //a call to my angular function
  }

2. 我尝试将 .js 文件放入 angular.json 和 asset 文件夹中 “脚本”：[“src/assets/myfile.js”]， 然后我不确定在该组件中要做什么。 我添加了这个： 声明函数 receiveMessage(): void;

但这就是我所得到的。 window.onload 函数似乎没有在页面加载时运行。

Answer 1

如果其他人遇到此问题，我的解决方法如下：

这是我如何让它工作的：

1. 我将 javascript 文件放在我的资产文件夹中
2. 我将其添加到脚本下的 angular.json 中
3. 在 tsconfig.json 中，我添加了

   "allowJs": true, // allow js scripts usage inside the project

4. 在 javascript 文件中，

    function receiveMessage(event) {
      window.angularComponentReference.zone.run(() => { 
      window.angularComponentReference.loadAngularFunction(event.data); });        
    }

export function addMyListener() { 
  window.addEventListener("message", receiveMessage, false);
}

5. 在我的组件中
   a) 从“../../assets/myscript.js”导入 * 作为 myscript
   b) iFrameAlreadyLoaded = false; //创建变量并默认为 false。确保 iFrame 仅加载一次。
   c) 在 ngOnInit

    myscript.addMyListener(); 
    window['angularComponentReference'] = { component: this, zone: this.ngZone, loadAngularFunction: (value: any) => this.myAngularFunctionName(value), };

d) 也在 component.ts

    if (!this.iFrameAlreadyLoaded) {
      var myElement = document.getElementById("myiframe");
      if (myElement !== null) {
        document.getElementById("myiframe").setAttribute("src",this.iFrameURL); //set the iframe source
        this.iFrameAlreadyLoaded = true;
      }
    }
  }