21

Let me explain. I'm developing a javascript application to help people develop websites. I wont explicitly go into what it does, just know that it works by superimposing its html/inline css interface over the website that's being developed and offers a variety of tools such as tracing images and code minifiers.

I have it stored on a server as a .js file. All people have to do to access my application is copy and paste a small bit of html onto their page to use it, like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="www.example.com/application.js"> <div class="application"></div>

The html and inline css of the interface is then inserted into the 'application' div using jquery's .html() function.

It all works perfectly.

Apart from one thing. The load time. As a user develops their site they will be continually refreshing their page, and this results them having to wait about 3 seconds (very annoying as time goes on) for the application's interface to load.

Of course, if the browser's cache is turned on, the problem dissappears, but if you're developing a site you're going to want to have your cache disabled! It's a conundrum.

Then I thought to use local storage objects to hold strings of the interface' svg graphics, and then .html() these strings into inline css. It's an elabourate workaround, but only developers would use this tool. It isn't an end user thing. And it works beautifully too, but the thing is, the browser still needs to download the script in-order to know to access the locally stored images! Processor speed isn't bottlenecking it, it's bandwidth.

So I was thinking storing the script itself in a local storage object, and having a tiny initialisation script to run it.

The initialisation script would simply retrieve the script from the local stroage object as a string, parse it accordingly and then run it.

To reiterate my question, running it is the part I can't do! I can insert the script onto the page via .html(script), but then how do I go about running it?

Improve this question
9
  • "if you're developing a site you're going to want to have your cache disabled!" - Really? Does CTRL+F5 not sort that out? Commented Aug 19, 2013 at 12:26
  • Have a look at this api.jquery.com/jQuery.globalEval I think that may help you out in this situation. Commented Aug 19, 2013 at 12:26
  • 3
    @PaulD.Waite Nope, just Google doing that in Chrome and see the swathes of users recommending a long-press-and-hold of that familiar combination. Indeed, Chrome has something altogether more productive: a web developer setting to disable the cache while dev tools are open. Commented Aug 19, 2013 at 12:29
  • 1
    @PaulD.Waite Do you know what, Paul, I'm reading up on that eval function and it seems to be just the ticket...there appears to be security issues, but like a say, it's a tool to be executed locally so it looks promising. Pure js as well! Commented Aug 19, 2013 at 12:34
  • 1
    Since you are evaluating your own script, there should not be a security issue. Commented Aug 19, 2013 at 12:36

3 Answers 3

Reset to default
21

While using eval(myScript) is the most direct approach, I prefer this:

var script = document.createElement('script'); script.src = 'data:text/javascript,' + encodeURI(myScript); script.onload = function() { //optional callback }; document.body.appendChild(script);

This is inserting an actual script tag using a data uri as the source. This way, it will appear under "scripts" on the resources tab of the dev tools. When the script loads, the data uri (your code) will be executed.

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

4 Comments

For a complete answer you need to change script.src (used for linked script) to script.text (used for inline script) which is the one he needs in order to set the value stored in localStorage which contains the cached code. That said, you solution seems better, well done!
While script.text = myScript; does work, I am unsure why that would be useful. The result is closer to just using eval(myScript) as the script will no longer appear in the resources tab, which I find to be a nice convenience.
@m59 I'm not saying here what is useful or not, I'm just trying to resolve the problem Starkers is having, and in his case by what I read in the problem he explains he doesn't want to load the script externally since it would inccur in the same cache issue he says, so again, he needs to use script.text. Regarding of having the code available at the console, I don't think he wants the client to see his code but that's up to him.
My solution doesn't propose loading the script externally. Script.text is impractical. If he wants the script present, a data uri makes sense, if not, it makes sense just to use eval().
7

Here are two methods:

Method 1: eval()

eval(localStorage.myCode);

Method 2: the Function constructor

new Function(localStorage.myCode)();

Here are the jsfiddle demos showing that they all work:

Method 1: http://jsfiddle.net/markasoftware/3BkAV/

Method 2: http://jsfiddle.net/markasoftware/j6JAz/

Improve this answer

Comments

4

You just need to use the eval function of JavaScript.

You can end up writing something like the following:

localStorage.myCode = "alert('just a test')"; eval(localStorage.myCode);

You can check if your code is stored like this:

if (!localStorage.myCode) { // local storage code not exists, load from somewhere else } else { // perform the eval using the code from local storage }

I tested this code in Chrome and works. The only problem I see is that you are forcing your users to use only browsers that support local storage.

Here is the browser support:

  • IE 8+
  • FireFox 3.5+
  • Safari 4+
  • Chrome 4+
  • Opera 10.5+
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.