Calling an external javascript from html

Question

I have a javascript located on URL http://www.example.com/script.js.
When run, the script returns a UUID in the following format:

var uuid="AAAABBBBCCCCDDDD";

Every call to the JavaScript returns a random unique string.

I have a simple HTML page with a single text box on it. I need to call the JavaScript before the page loads and put the above result into the textbox.

I tried to use jQuery:

$.get(URL,callback);

But that didn't work; No results were returned.

How to I call an external JavaScript and put the result inside the textbox?

EDIT: Here is the code I used:

<script language="javascript">
$(window).bind("load",start);

function start()
{
    alert("Inside");
    alert($.getScript("http://www.example.com/script.js")
}
</script>

I'm using this code inside a system that generated its own HTML code and I can't modify the <head> tag, so adding the JavaScript code there isn't an option. I tried using the above but it seems to break the code as no alert is shown. If I remove the jQuery part, the "Inside" alert is shown. Do I need to reference jQuery in some way in order for it to work? Is there another way to import JavaScript code without modifying the <head> tag?

unrelated: `language="javascript"` is deprecated, use `type="text/javascript"` — Ruan Mendes, Jan 02 '16 at 17:25

Barmar · Accepted Answer · 2016-01-02T17:28:36.567

3

Use $.getScript. This will load and execute the script. It has a callback that runs after the script is executed.

function start() {
    $.getScript(URL, function() {
        $("#textbox").val(uuid);
    }
}

Displaying the return value of $.getScript is not useful. It's an asynchronous function, it returns the jqXHR object that represents the AJAX call, not anything related to the script itself. If you want to use what the script does, you have to do it in the callback.

edited Jan 02 '16 at 17:28

answered Jan 02 '16 at 16:25

Barmar

741,623
53
500
612

Tried using this approach, but it seems that it breaks my code (see my original post for more explanations). Was the "getScript" method only works with specific jQuery versions? – ocp1000 Jan 02 '16 at 17:23
@ocp1000 You're not putting your code in the callback of `$.getScript` That's how you can make sure code only runs after the script is loaded – Ruan Mendes Jan 02 '16 at 17:24
@ocp1000 I've rewritten my answer in terms of the `start()` function from the question, although using `$(document).ready()` should work just as well. – Barmar Jan 02 '16 at 17:29
@Barmar Changed my code with your edited version. Still, no affect. I checked my jQuery version and it's 1.9.1. Could getScript not support version 1.9.1? – ocp1000 Jan 02 '16 at 17:38
`$.getScript` was added in jQuery 1.0. If it wasn't in 1.9.1 you would get an error saying the function is undefined. – Barmar Jan 02 '16 at 17:40
Are there any errors in the Javascript console? – Barmar Jan 02 '16 at 17:41
Console showed "Blocked loading mixed active content" error. I changed the url from "http" to "https", the error is gone, but no uuid is shown. I even tried to add a simple alert inside the callback, but I don't see the alert when I enter the page. – ocp1000 Jan 02 '16 at 18:16
If you look in the Network tab, does it show that the script was loaded successfully? – Barmar Jan 02 '16 at 18:20
Some progress: It seems that the solution you suggested works fine in chrome (and I thank you for that), but the error occur in Firefox (43.0.3 version, 64Bit). Any idea on how to fix it just for Firefox? – ocp1000 Jan 02 '16 at 18:24
Where are you loading the original page from? Is it from a server or a local file? It sounds like a cross-domain AJAX issue. – Barmar Jan 02 '16 at 18:26
It is from a server. I'll search more on cross-domain AJAX issues in Firefox and see for possible solution. Thanks for the help! – ocp1000 Jan 02 '16 at 18:29
If the browser is blocking it, there should be a message in the console explaining why. – Barmar Jan 02 '16 at 18:30

score 0 · Answer 2 · answered Jan 02 '16 at 16:25

0

Have you tried to put the script in the head section of your HTML code

answered Jan 02 '16 at 16:25

user3311392

5
3

Unfortunately, I can't modify the tag since I'm working in a system that generates its own HTML code. See my original post with more clarifications. – ocp1000 Jan 02 '16 at 17:21

score 0 · Answer 3 · answered Jan 02 '16 at 16:26

0

Calling an external script is the same as importing any other script:

<script src='http://example.com/script.js'></script>

Put that in your head. To make your variables defined in that script accessible to other scripts, you can try this:

window.uuid = 'blablabla'

Although you probably want to do something else as apparently global variables are evil.

answered Jan 02 '16 at 16:26

birdoftheday

816
7
13

Unfortunately, I can't modify the tag since I'm working in a system that generates its own HTML code. See my original post with more clarifications. – ocp1000 Jan 02 '16 at 17:23

Calling an external javascript from html

3 Answers3