Read javascript file and execute code

Question

I'm building a map similar to Google Maps using HTML5 canvas. I'm also creating a tiling system where tiles are only loaded when dragged on screen.

So I have multiple javascript files that will draw on the canvas, each one a tile. One of the files might look like this (ctx being the canvas 2d context):

ctx.fillStyle="rgb(255,255,255)";
ctx.beginPath();
ctx.moveTo(256,197);
ctx.lineTo(177,241);
ctx.fill();

Now, I know one method of calling and executing the javascript files, which is like so:

function getTile(src){
      var tileScript = document.createElement('script');
      tileScript.src = src;
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(tileScript); }

But I don't really want large numbers of script tags being added to the document head. With all the layers in the map, this might end up being a ridiculous number of scripts like 50.

Is there another method of reading and executing these files? Alternatively, if anyone could suggest an entirely better method of going about this, I would be open to suggestions.

You can always remove the script element after it loaded, if that's the only thing that bothers you. But, instead of loading a bunch of JS files with executable code, why don't you just store the data? — Felix Kling
– Felix Kling, Commented May 10, 2014 at 19:41
Why not create a service on the server that just returns the coordinates you need, then create a function that gets those coordinates and draws on the canvas. — adeneo
– adeneo, Commented May 10, 2014 at 19:41
@adeneo if you're talking about storing the information in a server database, I'm unable to do that on this project. The data needs to be stored and accessed client side. — CaribouCode
– CaribouCode, Commented May 10, 2014 at 19:44
@FelixKling I wish I could store everything a server database but unfortunately I can't on this project — CaribouCode
– CaribouCode, Commented May 10, 2014 at 19:45
Then store just the coordinates (the data) in a file or variable, get that and use it, why store bits of code in multiple javascript files. — adeneo
– adeneo, Commented May 10, 2014 at 19:45

Nano · Accepted Answer · 2014-05-21 07:01:17Z

1

If you just need the coordinates, use Ajax to read a .json File. Then you could execute the function above with your data.

JSON Example:

[[784,457],[759,989]] <- your coordinates

Ajax call:

function loadJSON() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
           render(xmlhttp.responseText)     //render your map with the response
        }
    }

    xmlhttp.open("GET", "your_json_file.json", true);
    xmlhttp.send();
}

The render() function:

function render(response){
   var json = JSON.parse(response); //parse the response to json
   ctx.fillStyle="rgb(255,255,255)";
   ctx.beginPath();
   ctx.moveTo(json[0][0],json[0][1]);
   ctx.lineTo(json[1][0],json[1][1]);
   ctx.fill();
}

Or if you realy just want to eval your functions, execute the eval() function on your Ajax Response:

eval(xmlhttp.responseText);

but remember that this is very uncertain!

edited May 21, 2014 at 7:01

answered May 10, 2014 at 19:37

Nano

1,3976 gold badges20 silver badges33 bronze badges

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

8 Comments

CaribouCode Over a year ago

Could you elaborate with an example at all? I'm not very experienced with ajax and json.

CaribouCode Over a year ago

Unfortunately it's the entire code of the file I need to execute, not just coordinates. The code in each file will be completely different. Will this method still work applying the entire code, not just coordinates?

Nano Over a year ago

you can pass any data with json. you just have to write a Dynamic Function to handle the response

CaribouCode Over a year ago

So what would that look like in this case to parse the file example I gave? Bearing in mind it would also need to work for completely different blocks of code in other files. Sorry, I just can't get this working so far.

Nano Over a year ago

You could get the File with your functions an then execute the JavaScript eval() Funktion with your Response. But that is a very dirty solution

|

Collectives™ on Stack Overflow

Read javascript file and execute code

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related