The relativity of "<script src=" - javascript

So on a HTML page, when you link to a JavaScript file, is it the same as it actually being there (like include() in php) or does everything have to be relative to the folder that the js file is in?
eg if I have <script src="scriptage/my.js"> </script> in index.html, is a image file to the js file 'image.png' or '../image.png'

JavaScript has no concept of files. Although certain extensions may provide file read/write APIs, everything is relative to the document.

Just like the php include(), it relates to the path of the file where you have attached the script. like here index.html

Your images should be relative to the JavaScript file, not the calling document.

Related

Include a JavaScript library in a JSP file

I'm trying to use JavaScript functions from the a JavaScript library in my JSP file to display the result on a web-browser page, but it seems like the inclusion didn't work.
I actually put the .js file corresponding to the library in the WEB-INF folder and added the following line in the JSP file to include it in it :
<script type="text/javascript" src="./jsgl.min.js"></script>
I successfully managed to use the library in a simple HTML file, that's why I don't understand why this doesn't work.
EDIT :
TLDR
Put the JS file in a folder under web content (but not WEB-INF) like [WebContent]/js/jsgl.min.js, and use the following in the JSP:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>
Explanation
JSP files are compiled by the server, then processed to send data (typically HTML) back to the web browser. A <script> tag is a HTML tag that gets interpreted by the browser, not by the servlet container. So the browser sees that in the HTML then makes a new request to the server for the JavaScript file in the src attribute.
The src attribute is relative to the URL that the browser asked for, not to the path of the JSP on the server.
So as an example, let's say:
The browser asks for a page at http://example.com/SomeWebApp/some-resource
The servlet container internally forwards the request to a JSP at /WEB-INF/jsp/somepage.jsp
The response sent to the browser contains the script tag <script type="text/javascript" src="./jsgl.min.js"></script> (as in your question)
The browser sees the URL ./jsgl.min.js and resolves it relative to the URL it has asked the server for (which in this case was http://example.com/SomeWebApp/some-resource - note there is no trailing '/') so the browser will request the JS file from http://example.com/SomeWebApp/jsgl.min.js*. This is because the relative URL in the script tag's src attribute starts with a '.'.
Another answer suggested putting the JS file in a 'js' folder and changing the script tag to <script type="text/javascript" src="/js/jsgl.min.js"></script>. Using the same original page URL as in the example above, the browser would translate this src URL to http://example.com/js/jsgl.min.js. Note that this is missing the "/SomeWebApp" context path.
The best solution therefore is indeed to put the JS file in a static folder like /js/jsgl.min.js, but to use the following in the JSP script tag:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>
The JSP will translate the ${pageContext.request.contextPath} bit into the current context path, making the code portable (if you redeploy the webapp with a different context path, it will still work). So the HTML response received by the browser will be (again, sticking with our example above):
<script type="text/javascript" src="/SomeWebApp/js/jsgl.min.js"></script>
The browser will now resolve that relative URL to the correct target.
__
*If the original URL had a trailing slash = i.e., was http://example.com/SomeWebApp/some-resource/, the JS URL would be http://example.com/SomeWebApp/some-resource/jsgl.min.js
Static resources should be put outside the WEB-INF folder (as you would typically not allow web access to its content).
You could put the file under webapp/js/, then change your script import to:
<script type="text/javascript" src="/js/jsgl.min.js"></script>
In addition to being good practice, this is good as it is not relative to the location of the JSP file.
Files in WEB-INF are inaccessible.
You may put them under webapp and try accessing as mentioned above.

Where is external js file in html stored? Can I

Sorry, I don't have a good understanding of the web, but:
When you load in an external script file into an html document, where does it hold or cache that file? It doesn't put it in the index.html file.
<html>
<head>
<script src="name_of_file"></script>
</head>
.....
I ask because I'm working with node.js, and I'm wondering if I list an external script file under my index.html page, I can send the javascript file to the client.
the browser will recognize the "src"="http://xxx/xx.js" of your script tag,and check if the resources(identified with URI:"http://xxx/xx.js") has cached in browser local cache dir(every browser has its own dir)
if the file exist and cache is not expired,the browser will directly load this file,otherwise browser will download the script file,and execute them when download finish.
This question has no good answer. A JavaScript program can be located anywhere on a server, It's just linked to with <script src=SCRIPT></script> Where SCRIPT is the relative or absolute path to the .js file. Check out This site for more info.
It's wherever the file is being served from. With what you've given and default setup, the file will be in the same directory as your index.html file

.js files not being called on pages included in folders

At the bottom of every page, I have a .php include that links to all my .js files.
<?php include 'Core/js.php';?>
Within this .php I have this code;
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.dropotron.min.js"></script>
<script src="../js/skel.min.js"></script>
<script src="../js/skel-layers.min.js"> </script>
<script src="../js/init.js"></script>
<script src="../js/slider.js"></script>
This works perfectly for my pages placed in my root folder, ie "index.php"
However, the pages that are located in folders, don't seem to call the javascript when I use the .php include such as;
<?php include '../../../Core/js.php';?>
Although, when I don't use the include funtion, and just paste the < script>, it calls it perfectly. This wouldn't be a huge problem for me, but it doesn't allow the mobile site to run properly.
The first pages such as "index.php" have the mobile navigation, whereas pages located in the folders and don't have the php include code, don't have the same user friendly navigation. If someone could help me fix this, that would be great!
I think your problem is about paths.
When you execute: <script src="../js/jquery.min.js"></script> in your browser, it looks at the URL and goes from there. Let's say you're in http://example.com/products/index.php. The browser will try to load the JS from http://example.com/products/../js/jquery.min.js, which is http://example.com/js/jquery.min.js.
To avoid this, you should use absolute paths, like:
<script src="/js/jquery.min.js"></script>
Then it will always try to load http://example.com/js/jquery.min.js independently from the current URL.
As for PHP includes, I would advise you to use absolute paths when including files. There are many strategies, like using $_SERVER['DOCUMENT_ROOT'], using dirname() functions, using a global variable with your includes path, etc.
Whatever you choose, your includes should look something like:
<?php include '/var/www/includes/Core/js.php'; ?>
I'm assuming your folder structure is something like this:
/
index.php
js
jquery.min.js
jquery.dropotron.min.js
skel.min.js
...
Core
js.php
content
some folder
HTML files
...
So if you are inside content -> some folder -> html file your js.php should reflect this:
<script src="../../js/jquery.min.js"></script>
as you could see the path changes and thats where your error comes from
Use the absolute path. Your absolute path is the actual location on the server. An easy way to find it is look at the path you're connecting to with ftp.
It might look something like this /home/username/public_html/Core/js.php

How to run the .html file in browser?

I have just wrote a javascript file which I ran the via intelliJ using a few different browsers e.g. Google Chrome. This works fine as it runs locally e.g. http://localhost://.
However I want to be able to send it to someone so they just click on the .html file (packaged in correct folder) and it appears on their browser. Is there anyway I can do this? Right now the url points locally e.g. file:///Users/**/project/file.html.
Use a relative path. If your HTML file is in the same folder as the JS file, this means simply including it like so:
<script src="jsfile.js"></script>
If it's in a subdirectory, include all the folders necessary to get there:
<script src="subdirectory1/subdirectory2/jsfile.js"></script>
If it's up a directory, use the .. path:
<script src="../anotherfolder/jsfile.js"></script>
Or just include it in the HTML page itself:
<script>
// your code here
</script>

Android webview load local javascript

I am trying to load a javascript file stored on the device via html file which is loaded via a webview but never seems to load. I have tried using direct url's like you normally would in html and have also tried:
<script type="text/javascript" src="file:///android_asset/www/js/jsfile.js"/>
JavaScript is enabled on the webview settings too and works fine if I have it on a server.
Thanks if anyone can help.
Hi actually I thing you should call directly the js file because you are calling it from the browser which considers the asset folder being its root folder. You should use the "file:///" prefix when calling from java code. Try something like this:
<script type="text/javascript" src="www/js/jsfile.js"/>
You can use loadDataWithBaseURL.
Put all your javascript under an assets folder and give js file path relative to the assets directory in your script tag (in the html). Don't put a slash in the beginning of src.
Read the html into a string (htmlStr) and then load it in the webview as mentioned below.
webView.loadDataWithBaseURL("file:///android_asset/", htmlStr, "text/html", "UTF-8", null);
It has worked for me.

Categories

Resources