javascript - How to dynamically add scripts into the head tag when angular component has loaded - Stack Overflow

admin管理员组

文章数量:1195300

I have a script tag that has a skype web control cdn in it, the script tag has been inserted in the head of my index.html, now the script tag is called before the component I need it in has loaded, any ideas on how I can reference this script in my component?

I have a script tag that has a skype web control cdn in it, the script tag has been inserted in the head of my index.html, now the script tag is called before the component I need it in has loaded, any ideas on how I can reference this script in my component?

• javascript
• angular
• typescript

Share Improve this question Follow edited Oct 25, 2017 at 5:07 Smokey Dawson asked Oct 25, 2017 at 3:46 Smokey DawsonSmokey Dawson 9,2302121 gold badges8585 silver badges161161 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 22

I've figured it out, what you need to do is dynamically create the script tag and then append it to the head of your document:

export class Component {

//...

loadScript() {
  let node = document.createElement('script'); // creates the script tag
  node.src = ''; // sets the source (insert url in between quotes)
  node.type = 'text/javascript'; // set the script type
  node.async = true; // makes script run asynchronously
  node.charset = 'utf-8';
  // append to head of document
  document.getElementsByTagName('head')[0].appendChild(node); 
}

ngOnInit{
  loadScript();
}

script tag is called before the component I need it in has loaded, any ideas on how I can reference this script in my component

Most script tags export a global variable. E.g React $ _ etc. Read the docs on the lib and use the global variable they export.

本文标签： javascriptHow to dynamically add scripts into the head tag when angular component has loadedStack Overflow