Download scripts inside Angular 2 innerHTML binding

Question

I'm working on an Angular 2 application that is showing news items inside my application. The news items are saved in a database and loaded into the template using Angular's [innerHTML] binding.

A problem occurs when there is embedded content (like a Tweet) inside the news item's content, which requires a javascript file to be loaded (e.g. //platform.twitter.com/widgets.js). The problem is that the browser won't download the file, even after parsing the page.

Does anyone know how to solve this problem? Thanks!

How are you trying to download the file? – inoabrian May 20 '16 at 13:15 — inoabrian, May 20 '16 at 13:15

inoabrian · Accepted Answer · 2016-05-20T14:14:11.060

1

I think if you have something like this it'll download the file. So when you get the news feed items, if you have any data on the news feed item when you can determine if it has twitter embedded into it you can check for it and then fetch what ever js file you need.

loadedURLs = {
// to hold a cache so you wont download more than once.
};

this.service.fetchDataFromDB()
.subscribe(data =>{
   if(data.url.indexOf('twitter') != -1 && loadedURLs[data.url] == undefined){
     loadedURLs[fileURL] = fileURL;
     // send the file name you want or need.
     this.downloadJS(JSFileURL);
   }
});
downloadJS(fileURL){
   var script = document.createElement('script');
   script.src = (fileURL);
   document.head.appendChild(script);
}

edited May 20 '16 at 14:14

answered May 20 '16 at 13:18

inoabrian

3,762
1
19
27

Thanks, but how do I get Angular to call that downloadJS function? – Sjors May 20 '16 at 13:35
I added a snippet. – inoabrian May 20 '16 at 14:08

score 1 · Answer 2 · answered May 23 '16 at 13:21

For people interested in getting all external scripts from a string containing HTML:

findExternalScriptsInHtmlString(string) {
    var parser = new DOMParser();
    var scripts = parser.parseFromString(string, 'text/html').getElementsByTagName('script');
    var result = [];

    for (var i = 0; i < scripts.length; i++) {
        var src = scripts[i].getAttribute('src');
        if (src.length && result.indexOf(src) === -1) result.push(src);
    }

    return result;
}

Download scripts inside Angular 2 innerHTML binding

2 Answers2