用angular 2+中的JS操作DOM以運行腳本

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會清理script標簽，並且什么也不會發生。 因此，我有一個操作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上下文中檢查了腳本，它工作正常。

真的不知道從這里繼續前進，任何建議將不勝感激。 謝謝。

Answer 1

經過無數次嘗試插入小部件的嘗試，答案非常令人驚訝。 當我們了解通話的時間順序時，它看起來像這樣。

1）來自外部js的源2）然后，由於我們對球的操作，該腳本實際上被正確調用，但是未插入任何內容，因為來自js的源對另一個經過消毒的源進行了調用。

我們通過轉到交易視圖頁面，檢查了插入到那里的iframe來解決該問題，在那兒，我們看到了加載小部件的實際真實來源。 在繞過該源的安全性之后，將加載小部件。

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

這是一個非常棘手的問題，我們嘗試了所有可能的球機操縱來解決它，但答案出在表面上。

在Angular的html模板中，我們只是粘貼一個iframe，對於iframe源，是從交易視圖網站從iframe獲得的真實源。 在iframe中，我們將變量替換為源，並通過安全性對該變量進行傳遞。