add .js file as source in html file from server

Question

I have an HTML file on my server, and a Javascript file on the same server. I want it so that when I load the HTML file, it will the reference of .js file placed on the server.

I tried this way:

<html>
    <head>
        <script type="text/javascript src="...server side path...."></script>
    </head>
</html>

but it is not working. Can any one tell me how I can do this?! I attached the code

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:form="http://www.w3.org/2002/xforms" xml:lang="en">
<head>
<script type="text/javascript" src="~/FormFaces/formfaces.js"></script>
<form:model>
<form:instance>
    <data xmlns="">
<textbox1></textbox1>
<textbox2></textbox2>
<textbox3></textbox3>
    </data>
</form:instance>
</form:model>
</head>


<body>
<table><tr><td><form:input ref="textbox1">
<form:label>TextBox1</form:label>
</form:input>
</td><td><form:input ref="textbox2">
<form:label>TextBox2</form:label>
</form:input>
</td></tr><tr><td><form:input ref="textbox3">
<form:label>TextBox3</form:label>
</form:input>
</td><td></td></tr>
</table></body>
</html>

` I want the formfaces.js file to be included in my Text.html file. But when i run the text.html file through my local server in a browser, it doesnot load the formfaces.js file. IF i run that file manually , all works fine

Is it maybe simply not working because you didn't close the quotes around "text/JavaScript"? — JKing, Apr 01 '12 at 05:31
Just drag your `js` file from `solution explorer` in `head tag`, Asp.net will set correct path itself. — Raymond Morphy, Apr 01 '12 at 06:46

score 2 · Answer 1 · edited May 23 '17 at 12:11

I guess the problem might be that you don't know how to make the path to the javascript file.

If that is the case, the simplest will first trying to put both files (HTML & js file) in the same directory and just use the filename without path:

<script type="text/javascript" src="somefile.js"></script>

That should work always. And then if you want to try a file in different place you should use relative paths. Imagine your files are placed this way on the hard drive:

c:
  folder1
     subfolder1
        file.html 
     subfolder2
        somescript.js
  someother.js

Then, the references to the js files from the html will be the following:

<script type="text/javascript" src="../subfolder2/somescript.js"></script>
<script type="text/javascript" src="../../someother.js"></script>

EDIT:

You path on client side cannot contain the ~ symbol. That symbol should be parsed by the server side (i.e. inside <% %> tags).

Either use a safe relative path as I described above, or use server side code to make the path (see this other question: https://stackoverflow.com/a/697674/146513)

I edited the above post to get better understanding...I guess it is not the problem of path. Problem is somewhere else and i am unable to find it.Please respond — zeeshan, Apr 01 '12 at 09:40

score 1 · Accepted Answer · answered Apr 01 '12 at 04:20

1

Javascript files are read and executed on the client.

You need to use a client-side path; the browser will send an HTTP request to that URL.

answered Apr 01 '12 at 04:20

SLaks

868,454
176
1,908
1,964

i edited the above post to get better understanding . Please respond – zeeshan Apr 01 '12 at 09:41

score 0 · Answer 3 · edited Jan 10 '23 at 21:47

METHOD 1: setting up a GET response on server

if you are running node express server then here is how to do it:

in HTML file:

<script type='module' src="test.js"></script>

In Server side javascript file. You need to install npm PATH module so you can manipulate paths using __dirname. YOU NEED TO LEARN HOW PATH WORKS, it is very important skill.

now on Server side, here is the code:

app.get('/test.js', (req,res)=> {
    res.sendFile(path.resolve(__dirname, '..', 'test.js'));
})

Here is full code:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.resolve(__dirname, '..', 'public')));

app.get('/test.js', (req,res)=> {
    res.sendFile(path.resolve(__dirname, '..', 'test.js'));
})

const port = 1000;
app.listen(port, console.log(`listening on port: ${port}`));

METHOD 2: Using express static capability (see video above)

e.g.

app.use(express.static(path.resolve(__dirname, '..', 'public')));
app.use(express.static(path.resolve(__dirname, '..', 'jsFiles')));

or

app.use(express.static('foldername')

now place your JS file into this folder. This allows client-side to receive static files in that folder without a GET request.

and in your HTML document, just pretend that the JS file is in root, and it will load it for you:

<script type='module' src="test.js"></script>

METHOD 3: Putting JS file in the same folder as HTML file

Alternatively, just put the JS file into the same folder as the HTML file.

and in your HTML file, use this code:

 <script type='module' src="test.js"></script>

I have created a video on how to do this on my YouTube channel here.

score 0 · Answer 4 · answered Apr 01 '12 at 04:22

Use this

var sc=document.createElement('script');
sc.src="script.js";
document.getElementsByTagName('head')[0].appendChild(sc);

Some time using a resources like js,css from cross-domain browser security not allowed to use this.

if problem is not solved than i am not sure but this may help you

<script>
     window.domain = "YOUR_DOMAIN.COM";
</script>

add .js file as source in html file from server

4 Answers4