How to load an external js file as plain text and assign to variable as a string

Question

Really sorry if this is a dumb question but I can't seem to get this to work. As the title says i am trying to load an external js file and assign it to a variable as plain text. The project is a simple js "compiler" that stitches together a number of js files and minifies them into one. I am currently using the $.get() method and appending the response to a string.

The problem is that the js file that handles the above also needs to be included in the final minified file. I can load in all the other files and stitch them together just fine but when i load this main file into itself sourcing a js file it seems to evaluate and overwrite itself and so stops the process.

For the time being i have got around the problem by loading in a copy as a .txt file but it means i have to keep two files up to date which isn't ideal.

I found this article but it refers to javascript loaded via script tags in the head.

Any help would be appreciated. I will happily post code but not sure which bits would be useful.

Update: I probably should have mentioned that the project needs to run entirely client side so i can't use PHP/.NET pages. All the files I'm loading in are on the same domain though.

You'll need to issue an ajax request with the URL of the js file, and then extract the result. See XMLHttpRequest. — fred02138, Aug 23 '13 at 16:17
Just send an AJAX request. If you can't do that due to browser restrictions, proxy it through a serverside script, — Blender, Aug 23 '13 at 16:17
If it helps i am currently loading the js files in using jQuery get() method. For most files i simply append the response to a string variable. But it's when i load the main js file into itself that it all breaks. — Noel Drew, Aug 23 '13 at 16:20
@NoelDrew: Post your current code. Are you trying to load files from your site or someone else's domain? — Blender, Aug 23 '13 at 16:21
Post your code or create a jsFiddle so that we can add to it and show you the new AJAX code in context with what you already have. — cssyphus, Aug 23 '13 at 16:21
I've posted a brief example here: http://jsfiddle.net/e8JNu/ — Noel Drew, Aug 23 '13 at 16:38
I'm using the same method suggested by others here already. It works fine for most files. The problem is when i load a file into itself. I should add that the whole thing needs to run client side so no php/.NET — Noel Drew, Aug 23 '13 at 16:39

score 0 · Answer 1 · edited May 23 '17 at 11:43

Note that $.get() and $.post() and $.ajax() are all the same thing.

$.get and $.post are just shorthand versions of $.ajax() that come with presets (obviously, type: "GET" and type:"POST" for one...). I prefer using $.ajax because the format can be more structured, and therefore easier to learn/use.

Javascript/jQuery would look something like this:

<script type="text/javascript">

    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "loadmyfile.php",
            data: 'filename=js/myscript.js',
            success: function(whatigot) {
                //alert('Server-side response: ' + whatigot);
                $('#myhiddentext').val(whatigot);
            } //END success fn
        }); //END $.ajax
    }); //END $(document).ready()

</script>

Important: Note that you would need to do all the post-AJAX processing inside the success function. See this link for some simple AJAX examples.

Note that you can send data across to the PHP file by specifying a data: parameter in the AJAX code block. Optionally, you can leave out that line and simply hard-code the filename into the PHP file.

The text of the retrieved js file comes back into the AJAX success function (from the PHP file) as a string in the variable specified as the function param (in this case, called 'whatigot'). Do what you want with it; I have stored it inside a hidden <input> control in case you wish to retrieve the text OUTSIDE the AJAX success function.

PHP would look something like this:

loadmyfile.php

<?php
    $fn = $_POST['filename'];

    $thefile = file_get_contents($fn);
    echo $thefile;

References: PHP file_get_contents

score 0 · Answer 2 · answered Aug 23 '13 at 16:31

0

Try to use Ajax.get() :

var script;
$.get('script.js', function(data) {
  script = data;
});

for Ajax.get() it will work inside your domain, you can't call external domains, if your application requires loading external JS file then my guess is that you have to use PHP or another server-side language as:

var script;
$.get('getScript.php', {url: "http://test.com/script.js"}function(data) {
  script = data;
});

in getScript.php you can use CURL or file_get_contents

answered Aug 23 '13 at 16:31

trrrrrrm

11,362
25
85
130

I have added an explanation and some example code here: http://jsfiddle.net/e8JNu/ – Noel Drew Aug 23 '13 at 16:33
I am using this exact method and for most files it is working fine but it seems it breaks when i load a file into itself. Does that make sense? – Noel Drew Aug 23 '13 at 16:34
I should add that i need the whole thing to run entirely client side so i'm not able to load from php/.net – Noel Drew Aug 23 '13 at 16:36

How to load an external js file as plain text and assign to variable as a string

2 Answers2