标签云

微信群

扫码加入我们

WeChat QR Code

在动态加载JS JS [复制]

This question already has an answer here:

I have a dynamic web page where I need to import an external JS file (under an IF condition) inside another javascript file.

I tried to search for a feasible solution but it didn't work.

I have tried loading a JS file to the DOM using document.createElement() but it also didn't work. Apparently the Js was loaded into the DOM but was not accessible in the current JS file.

Solution in jQuery will also be fine


I too got the same issue...but no feasible solution

2018年05月27日16分30秒

what you are trying to achieve by doing this (so that an alternative may be suggested)?

2018年05月28日16分30秒

I am creating a dynamic page. That displays some effects conditionally. But the external JS can't be permanently included in the HTML

2018年05月27日16分30秒

See also: jspatterns.com/the-ridiculous-case-of-adding-a-script-element

2018年05月27日16分30秒

angulartutorial.net/2015/06/…

2018年05月28日16分30秒

I tweaked your script just a little made it execute if loaded otherwise load then execute... jQuery.pluginSafe = function (name, url, callback) { if(jQuery[name]){ callback; } else { jQuery.ajax({...}); } }

2018年05月28日16分30秒

can you provide some info on when it's buggy?

2018年05月27日16分30秒

It's not ideal because the file loaded in such isn't shown in Sources in DevTools. It's because this file is evaled

2018年05月27日16分30秒

An additional problem is that this would swallow any syntax errors. So you'd want to catch them in fail().

2018年05月27日16分30秒

No point in over complicating things. Bravo

2018年05月27日16分30秒

make sure to set the src attribute after the onload attribute source

2018年05月27日16分30秒

This really should be the best answer, no need to use a jQuery for simple tasks like this!

2018年05月27日16分30秒

woojoo666 why after onload? Isn't setting the src only before the appendchild enough?

2018年05月27日16分30秒

AliSharabiani oops you're right, it only matters if the element is already on the page. From my experience it's more common to first have the element on the page before setting the src, mainly bc of all the cases where you want to change the src dynamically, like for img tags and such. So I think its better practice to just get used to putting src after onload

2018年05月27日16分30秒

Upvoted for including onload.

2018年05月27日16分30秒

This code is excellent. Very little modifications were required to make it fully functional across chrome/firefox/opera. I wrote my own markdown rewriter in 6 lines of html which loads the markdown script. For content I add <template> tags with markdown. The rewriter appends the result of transforming markdown to HTML. Just plain beautiful. Thank you.

2018年05月27日16分30秒

A bit more work and I reduced ALL the html to 3 lines. The <template> tags with content are transformed and appended. Better than any of my prior efforts.

2018年05月27日16分30秒

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" /></head><body> <nav></nav> <template class="markdown"> == hello == </template> <template id="Spanish" class="markdown"> == hola == </template> </body><script type="text/javascript" src="/js/rewrite.js"></script> </html>

2018年05月27日16分30秒

This is an elegant solution that readily works. It also works well nested inside other functions. Highly recommend this option.

2018年05月27日16分30秒

Thank you, that's incredible. I think it worth adding callback option since we might want to execute functions based on these resources at the end of their loading.

2018年05月27日16分30秒