Javascript - Download other js and use it

Question

I begin into the worl of Javascript and I try to do something :

Go on my webpage
A javascript sheet on this page download another .js from another website and launch function on it or use it

The code on localhost :

index.html

<!DOCTYPE html>
<html>
<head>
<script src="test.js"></script>
<title></title>
</head>
<body>

<div id="test">

</div>

<script>
   update();
   setInterval(function(){document.getElementById('test').innerHTML = text()},3000);
</script>
</body>
</html>

test.js

function update(){
    httpGet("http://test.localhost/blabla.js")
}

function text(){
    return seeUpdate();
}

function httpGet(theUrl){
var xmlHttp = null;

xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, true );
xmlHttp.send();
return xmlHttp;
}

on test.localhost :

blabla.js

function seeUpdate(){
    return "iajdiashdh";
}

So the test sheet use the blabla sheet.

How it is possible to this ? Because with my solution it doesn't work....

Thanks in advance,

Smooba

EDIT :

In fact, I found thanks to user2227904.

Here is the final version of the script :

function update(){
var imported = document.createElement('script');
imported.type = 'text/javascript';
imported.src = 'http://test.localhost/blabla.js';
document.head.appendChild(imported);
}

Thanks to everybody !

Smooba

Related http://stackoverflow.com/questions/610995/cant-append-script-element — Artyom Neustroev, Aug 04 '14 at 15:49
I dont see `seeUpdate()` defined anywhere are you missing some code? - nevermind its separate, I see it now. — Wobbles, Aug 04 '14 at 15:49

score 2 · Accepted Answer · answered Aug 04 '14 at 15:51

2

Import the file using this code:

var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);

If this fails use third party library like jQuery

$.getScript('/path/to/imported/script.js', function()
{
  // script is now loaded and executed.
  // put your dependent JS here.
});

answered Aug 04 '14 at 15:51

user2227904

679
1
8
27

This is correct, JS scripts cannot reference other JS scripts without explicitly creating a new script element and injecting the file into it. – Wobbles Aug 04 '14 at 15:54

score 0 · Answer 2 · answered Aug 04 '14 at 15:55

0

I might be missing something, but it seems a much simpler approach is to include the script via a script tag, as in

<script src="http://test.localhost/blabla.js"></script>

But actually you probably should copy the script's contents so that you can include it from your own server. And since you're making the XHR call immediately, you might even include the said script's contents in your page for fast loading times.

answered Aug 04 '14 at 15:55

Hektor

1,845
15
19

While this is technically correct, based on the sample I assume there is a reason the user wants to explicitly call the js file from within another especially since the user demonstrates they know how to include js files by including the first one. – Wobbles Aug 04 '14 at 15:59
Thanks, good point. I wasn't sure if he knew he could include from a different server(!) – Hektor Aug 04 '14 at 16:00
The thing is that I don't want to include like that. In fact, I want to choose the version of 'blabla' in the Javascript so I need to add it through Javascript. But thanks for your answer. – Smooba Aug 05 '14 at 08:28

score -1 · Answer 3 · answered Aug 04 '14 at 15:47

-1

You need to insert whatever you get from your xmlhttprequest into the page in a <script> tag, so it gets executed by the browser.

answered Aug 04 '14 at 15:47

Andrei Dvoynos

1,126
1
10
32

Javascript - Download other js and use it

3 Answers3