Dynamically include script element in header or HTML by JavaScript

Question

I have a script to the third party JavaScript library which requires token to be injected dynamically.

I was told to include script below into the head of my html. I need to replace {your_token} in order for this to work. However this token is only available at runtime so I need to inject this script into the header of my application at runtime (init for the application code)

<script>(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel={your_token}...

What is the best way to replace your_token with right token and inject this script at the header of the application?

Do you mean inject a value in place for '{your_token}' from your view? Are you using templates on the server to construct your HTML output? — Casey Flynn
– Casey Flynn, Commented Jul 13, 2013 at 23:35

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Just as Casey asked, it depends on where this script block come from?

Backend replacement

If you use any backend template engine, you probably have the opportunity to replace that token into the one you have in hand. So the output will be the script contains the real token the script needed.
Front end replacement

If you are using some template in front such as using handlebar template(other template engines works almost the same) <script type="text/x-handlebars-template">your third party js code <token here></script>, you can replacing the token when generating the dom element.

For me I prefer do this at backend.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 14, 2013 at 1:03

Mike Li

3,4062 gold badges24 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:11:17Z

1

Assuming that "this token is only available at runtime" means "from the onModuleLoad" (for whichever reason), then you could have the script as a String in your GWT app (you might want to use a ClientBundle with the script in a TextResource, or simply a String constant in your code), replace {your_token} with String#replace and then inject the resulting script with the ScriptInjector.fromString.

Though if you can, use "backend replacement" as proposed by Mike Li with a dynamic host page.

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Jul 14, 2013 at 9:20

Thomas Broyer

64.6k7 gold badges95 silver badges165 bronze badges

Collectives™ on Stack Overflow

Dynamically include script element in header or HTML by JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related