使用角度2+操作带有JS的DOM以运行脚本
问题描述:
我需要将脚本插入到一个类似于此项的角度项目中。使用角度2+操作带有JS的DOM以运行脚本
<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);
}
现在,我的角度与消毒这样做,我们没有得到成过程后运行ngAfterViewInit()方法。脚本被插入,控制台输出显示它在div处,你可以检查看到它,但没有任何反应!
我在项目外的普通html上下文中检查了脚本,它完美地工作。
不知道从这里搬到哪里真的,任何建议将非常感激。谢谢。
答
经过多次尝试插入小部件后,答案相当令人惊讶。当我们理解这个电话的年表时,它看起来像这样。
1)外部JS来源 2)然后,因为我们的圆顶操作的脚本实际上所谓正确但没有插入,因为JS源发向其中消毒其它来源的电话。
我们通过访问交易视图页面来检查插入的iframe,这是我们从小部件的加载位置看到实际真实源码的地方。在我们绕过该源代码的安全装载之后。
this.calendarSrc =
this.sanitizer
.bypassSecurityTrustResourceUrl('the real source');
这是非常棘手的问题,我们尝试了每一个可能的圆顶操作,可以解决它,但答案是在表面上。
在角度的html模板中,我们只需简单地粘贴一个iframe,iframe源代码就可以从交易视图网站的iframe中获得真正的源代码。在iframe中,我们用一个变量替换源代码,然后通过变量的安全性替换。
看来,该脚本可能会绑定到事件发生在脚本实际上在Angular中初始化之前,例如onload。 –