Question

我需要将一个脚本插入到一个看起来像这样的角度项目中。

<script type="text/javascript" src="https://s3.tradingview.com/external-
embedding/embed-widget-events.js">
{
"width": "510",
"height": "600",
"importanceFilter": "-1,0,1"
}
</script>

显然，不能只是将其粘贴到模板中，因为NG会清理脚本标记，不会发生任何事情。所以我有一个操作DOM的方法，看起来像这样。

insertScript() {

    var element = document.getElementById("myCal");
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-events.js";
    script.innerHTML = '{"width": "510","height": "600","importanceFilter": "-1,0,1"}';
    element.appendChild(script);
    console.log(element);
}

现在，我在使用sanitization完成angular之后在ngAfterViewInit（）上运行该方法，因此我们不会进入该过程。脚本被插入，控制台输出显示在div处，你可以检查它在那里看到它，但没有任何反应！

我在项目之外的普通html上下文中检查了脚本是否完美。

真的不知道从哪里开始，任何建议都会非常感激。感谢。

Answer 1

在多次尝试插入小部件后，答案非常令人惊讶。当我们理解呼叫的年表时，它就像这样。

1）来自外部的js 2）然后由于我们的圆顶操作，脚本实际上被正确调用，但是没有插入任何内容，因为js sourced调用了另一个被消毒的源。

我们通过转到交易视图页面来检查问题，检查插入的iframe，这是我们从加载小部件的位置看到的实际真实来源。在我们绕过该源的安全性后，加载了小部件。

this.calendarSrc = 
        this.sanitizer
        .bypassSecurityTrustResourceUrl('the real source');

非常棘手的问题，我们尝试了所有可能的圆顶操作，可以解决它，但答案是表面上的。

在角度的html模板中，我们只是简单地粘贴一个iframe，而iframe来源是我们从交易视图网站的iframe获得的真实来源。在iframe中，我们将变量替换为源，我们通过传递安全性来获取变量。

使用角度为2的JS操作DOM来运行脚本

1 个答案: