How to get the text of a external JavaScript without webserver-stuff (i.e. AJAX)

Question

I'm writing a WebGL application. Until now I put my shaders in <script>-tags right into my standard html file (let's call it index.html). So it was easy to just "parse" the shader-code by using .text on the script-tags taken with getElementbyId('foo').

But now I think that's untidy. I want my shaders to be stored in external files with extension .vert /.frag and parse them from there. My first approach was the following:

<script id="shader-vs" src="./shaders/basic_vertexShader.vert" type="x-shader/x-vertex"></script>

<script id="shader-fs" src="./shaders/basic_fragmentShader.frag" type="x-shader/x-fragment"></script>

var shaderScript = document.getElementById(id);
if (!shaderScript) {
    return null;
}

var str = shaderScript.text;

The result is an empyt string (""). I double checked if all file-paths are correct. It seems, that .text only works for lokal tags.

So, what could I do, to receive the contents of that files? AJAX isn't a possibility, since the application should work without internet-connection, too, when it's saved on clientside's storage.

I'm thankful for every suggestion.

Important: As I mentioned I'm NOT searching for that usual AJAX-stuff. I'm searching for a possibility to get the code of external linked script-files. Since they are statically linke in the HTML-file, I thought this should be no problem without asynchrone requests. But it seems to be.

stackoverflow.com/questions/5878703/…, stackoverflow.com/questions/28365163/…, stackoverflow.com/questions/14219947/… — unconditional
– unconditional, Commented May 1, 2015 at 14:31
Thank you @dekkard, but this all leads to ajax-alike recommendations :/ — rfinster
– rfinster, Commented May 1, 2015 at 15:22

Jared Smith · Accepted Answer · 2015-05-01 15:06:17Z

1

I recommend using server-side templating to store the code in the files you mentioned but then inject it into the html. This method presents a separation of concerns: your shader files are separate the way you want, the template gets compiled then shipped out when the HTTP request comes in. A mustachey example using pseudo-code (assumes hash-literal syntax for your server-side language):

html = system.readFile('index.html');
vert = system.readFile('myVertFile.vert');
Mustache.render(html, {data: vert});

where your HTML looks like this:

<script>{{data}}</script>

This method can also be used to do any sort of conditional module loading based on the contents of the incoming http request.

answered May 1, 2015 at 15:06

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

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

3 Comments

rfinster Over a year ago

Thanks for your response, unfortunately there is now use of a sepcific web-server intended, yet. This may be a good solution, when the project gets bigger, but until then I have to deal without server-side-programming.

Jared Smith Over a year ago

You could alternatively use a build process (or even just a shell script) that injects the contents of the desired file(s) into your html file (using a regex replace for instance). You could even (depending on your revision control system) use a hook to make it run every time you commit. Otherwise, there doesn't seem to be any way to achieve your aim. Any other method will result in additional HTTP requests.

rfinster Over a year ago

Actually that seems to be fine. Grunt.js could handle this ... Thank you :)

Leo · Accepted Answer · 2015-05-02 03:56:13Z

0

You can still use Ajax if you make it an offline (see comments!) html5 web app. (It depends of course on what browsers you need to support at the moment.)

edited May 2, 2015 at 3:56

answered May 1, 2015 at 15:14

Leo

4,4867 gold badges56 silver badges85 bronze badges

3 Comments

Quentin Over a year ago

The question explicitly says: the application should work without internet-connection, too, when it's saved on clientside's storage

Quentin Over a year ago

Web app is a generic term for just about any application that is run through a web browser. You seem to be confusing it with the more specific Offline Web App that makes use of the applicate cache. If you got that right, you'd need to go into a lot more detail before this would be a good answer.

Leo Over a year ago

Ah, thanks, I was not aware that people called any web page with JavaScript a web app. Yes, of course I mean an offline html5 web app. But is there much more to say about that? Just put the files in question here in the manifest files offline file list. (For details just see any page about it, for example this excellent page: diveintohtml5.info/offline.html)

Collectives™ on Stack Overflow

How to get the text of a external JavaScript without webserver-stuff (i.e. AJAX)

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related