Kill execution of a running script tag in Angular 11
Question
Currently I have an Angular component that appends a list of script tags into the DOM with Renderer2 library, the code of these scripts is retrieved from an external source. In the following snippet, scripts array is the list of source links. Being this the case, I'm unable to modify the JS code from them:
for(let i = 0; i<scripts.length; i++){
let script = this.renderer2.createElement('script');
script.type = `text/javascript`;
script.src = scripts[i];
this.appendedChildren.push(script);
this.renderer2.appendChild(this._document.body, script);
}
I tried to remove them from the DOM, but the scripts keep executing:
ngOnDestroy(){
for(let i = 0; i<this.appendedChildren.length; i++)
this.renderer2.removeChild(this._document.body, this.appendedChildren[i]);
}
What I would like is to get the pid or some kind of identificator to be able to kill the JS scripts within the ngOnDestroy(), and also a method to do it so.
2 answers
solution1
0 2021-12-27 16:59:53
constructor(private renderer: Renderer2) {}
let script = this.renderer.createElement('script');
script.type = `text/javascript`;
script.src = 'testme.js';
script.id = "testScriptName";
this.renderer.appendChild(this._document.body, script);
ngOnDestroy() {
var elem = document.querySelector("#testScriptName");
document.querySelector("#testScriptName").parentNode.removeChild(elem)
}
solution2
0 ACCPTED 2021-12-30 16:59:53
Okay, I've been told a way to do it and it works flawlessly.
Instead of creating scripts, I can create an iframe and pass all the scripts using the attribute srcdoc from the iframe, this would be the structure I want to create from the Angular component and append to the DOM, I should be creating an iframe per script:
<iframe class="iframe-container" srcdoc='
<html>
<head></head>
<body>
<script src="https://script-source.com"></script>
</body>
</html>'>
</iframe>
So to create and append the scripts from the Angular component, notice that I'm adding the component into an appended children array (I'm aware there are cleaner ways to do this, just to get the idea):
let iframe = this.renderer2.createElement('iframe');
iframe.setAttribute('class', 'iframe-ad');
iframe.setAttribute('srcdoc', `
<html>
<head></head>
<body>
<script src="https://src-example-url.com"></script>
</body>
</html>
`);
this.appendedChildren.push(iframe);
this.renderer2.appendChild(this._document.body.querySelector('div.iframe-holder'), iframe);
In order to delete the iframe, just adding these lines into the ngOnDestroy() makes it:
ngOnDestroy(){
for(let i = 0; i<this.appendedChildren.length; i++){
this.renderer2.removeChild(this._document.body, this.appendedChildren[i])
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.