时间戳

首页 > 解决方案 > HTML 无法与外部 Javascript Angular 9 通信

javascript - HTML 无法与外部 Javascript Angular 9 通信

问题描述

我在我的 Angular 9 应用程序中实现Duo Auth 。我在文件夹中有以下文件用于实现 Duo 身份验证。

|---index.html

|---abc.js

我的 index.html 文件如下所示

索引.html

<html>
<head>
    <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="abc.js"></script>
</head>

<body>
    <div class="duo_iframe_wrapper">
        <iframe id="duo_iframe" title="Two-Factor Authentication"
        data-host="abc.duosecurity.com" 
        data-sig-request="abc"
        data-post-action="xyz">
        </iframe>
    </div>
</body>
</html>

什么有效

如果我只是在浏览器中打开 index.html 就可以了。iframe 完美加载

什么不起作用

我所做的，我尝试根据 Angular 组件结构转移到 index.html 上面。我创建了一个组件并将这个 html 粘贴到abc.component.html. 现在我知道 angular 会忽略脚本标签，所以我尝试在内部加载外部 js angular.json。当我路由到这个组件时。脚本按预期加载。但是 iframe 什么也没加载。iframe 正文空了。

我尝试在角度的 index.html 中加载外部 js。再次加载脚本，但 iframe 为空。我尝试通过以下几行在组件级别添加脚本标签

 var dynamicScripts = ["../assets/js/custom/Duo-Web-v2.js"];
 for (var i = 0; i < dynamicScripts.length; i++) {
   let node = document.createElement('script');
   node.src = dynamicScripts[i];
   document.getElementsByTagName('head')[0].appendChild(node);
 }

脚本加载正常，但 iframe 为空。我尝试在构造函数 ngOnInit 和 ngAfterViewInit 中加载它。

我认为 javascript 无法像在第一个场景中那样与 iframe 通信。

注意：如果我在 angular 的 index.html 中复制准确的 html 并在其中加载 javascript，它可以正常工作。

那么，谁能帮我理解我做错了什么？或者即使可能与否？

标签： javascriptangulariframe

解决方案

推荐阅读