admin管理员组文章数量:1318328
Initially I kept below code statically in Index.html and it works.
<script src="/le.min.js"></script>
<script>
LE.init({
token: 'token',
region: 'x'
});
</script>
due to my requirement I decided to load dynamically for that I wrote sample code.
//loads librabry
jsScript = document.createElement('script');
jsScript.src = `/le.min.js`;
document.head[0].appendChild(jsScript);
//loads initialise function in the script
script = document.createElement('script');
script.innerHtml= `LE.init({
token: '${TOKEN}',
region: 'US'
});`
document.head[0].appendChild(script);
both are appending rightly but it throwing error LE is not defined
.If I append the initialise func script as type=text
no error but no initialise would happen. How can I achieve this ?
Initially I kept below code statically in Index.html and it works.
<script src="/le.min.js"></script>
<script>
LE.init({
token: 'token',
region: 'x'
});
</script>
due to my requirement I decided to load dynamically for that I wrote sample code.
//loads librabry
jsScript = document.createElement('script');
jsScript.src = `/le.min.js`;
document.head[0].appendChild(jsScript);
//loads initialise function in the script
script = document.createElement('script');
script.innerHtml= `LE.init({
token: '${TOKEN}',
region: 'US'
});`
document.head[0].appendChild(script);
both are appending rightly but it throwing error LE is not defined
.If I append the initialise func script as type=text
no error but no initialise would happen. How can I achieve this ?
- The script file probably isnt loaded yet, therefore LE is not defined. You'll need to use the onload event: stackoverflow./questions/16230886/… – Erik Svedin Commented Jan 23, 2019 at 10:21
-
I believe you need an
onload
event handler for the first script – Jeremy Thille Commented Jan 23, 2019 at 10:21 - use Angular safe pipe implementation DomSanitizer(bypassSecurityTrustScript) – Omprakash Sharma Commented Jan 23, 2019 at 10:23
- I hope could be helpful this answer - stackoverflow./questions/41547505/… – Omprakash Sharma Commented Jan 23, 2019 at 10:34
-
I'm calling those in
ngAfterViewInit
whatonload
would help me here in angular ? – k11k2 Commented Jan 23, 2019 at 10:41
1 Answer
Reset to default 7The right way to load a script dynamically in Angular is to use the Renderer2 class. First inject it in your constructor, then use it to add your script to document's head tag.
constructor(private renderer: Renderer2) { }
ngOnInit() {
const script = this.renderer.createElement('script');
script.src = `https://cdnjs.cloudflare./ajax/libs/le_js/0.0.3/le.min.js`;
this.renderer.appendChild(document.head, script);
}
The right way to execute functions from a js script file loaded to your app is to declare (declare var LE: any;
) this object in your ponent/service/or any other place you would want to use it. This way you can execute it's function directly instead of using a dynamic script.
Once it is declared you can use it directly, see this example code:
declare var LE: any;
initLE() {
LE.init({
token: '${TOKEN}',
region: 'US'
});
}
log() {
LE.log("Hello, logger!");
}
Check out this StackBlitz DEMO
You can see that in this DEMO I'm reaching to LE code, but obviously it is not working because of the missing token.
Full example Code:
import { Component, OnInit, Renderer2 } from '@angular/core';
declare var LE: any;
@Component({
selector: 'my-app',
templateUrl: './app.ponent.html',
styleUrls: ['./app.ponent.scss']
})
export class AppComponent implements OnInit {
constructor(private renderer: Renderer2) {
}
ngOnInit() {
const script = this.renderer.createElement('script');
script.src = `https://cdnjs.cloudflare./ajax/libs/le_js/0.0.3/le.min.js`;
this.renderer.appendChild(document.head, script);
}
initLE() {
LE.init({
token: '${TOKEN}',
region: 'US'
});
}
log() {
LE.log("Hello, logger!");
}
}
本文标签: javascripthow to load script and its function dynamically in angularStack Overflow
版权声明:本文标题:javascript - how to load script and its function dynamically in angular - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742043315a2417648.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论