HTML - Including absolute path for JS files - javascript

I am setting an absolute path for a JS file like this in an HTML file.
<script type="text/javascript" src="file:///C:/Users/Public/myapp/public/js/jquery.js"></script>
However, this doesn't seem to work in my browser. My document root is C:\Users\Public\myapp\public
Though the JS file exists outside the document root, I need to include it.
Thanks,

Absolute paths are not good when you are uploading to the shared server or to a server where you don't know the website directory paths. (Its not difficult to find out - but when this is uploaded by someone else or re-uploaded to new server - you will again need to update all references).
But you can use something like this:
../PATH-TO-FILE
Or for the above script:
<script type="text/javascript" src="../../myapp/public/js/jquery.js"></script>
which takes you one or two directories back of the file system.

Related

Difference between linking a javascript file and directly adding script into html

I am recreating a javascript game which requires tables, but when I link my javascript file to my index.html the grid does not show on my browser, but when I directly add my javascript inside the script tag in my html, the grid shows on the browser.
Any help would be appreciated thank you!
This is my code by referencing a js file inside html(the tables do not show)
html with js link
This is my code without referencing a js file(tables do show)
html without js link
This is my main.js
main js
This is the browser without linking js file
browser without js file
This is my browser with linking js file
browser with js reference
First I linked the js file with script src=js path but it did not work but it worked when I put the javascript directly inside the html script tag. I was wondering how I can make it work with referencing a separate js file for a cleaner html code.
It's due to that your local paths are not resolving correctly. Without seeing directory structure I can't know what could be wrong.
First of all, please re-check and verify that both files main.js and index.html are in the same directory.
Alternatively, you could create folder called js inside of your main directory (where index.html is) and then move the main.js into that folder and try:
<script type="text/javascript" src="/js/main.js"></script>
index.html and main.js files must be at the same directory in order to include .js file as you did
<script type="text/javascript" src="main.js"></script>
UPDATE (I will leave answer whole, if somebody also gets stuck, so they can troubleshoot the problem):
The reason why it couldn't resolve path is because there was blank spaces between src and = ; when giving src, that part needs to be connected.
Just like this
<script type="text/javascript" src="main.js"></script>
Take a look here:
What happens:

HTML src not correctly accessing required filepath

I have included a folder where I keep files I don't want people easily looking at, like passwords in php connection files. This folder is called 'inc' and is at the same level as the 'public_html' folder. I have put php files with database connection details in the 'inc' folder and accessed this using '../inc/' and the filename and it works perfectly - i.e.:
require_once('../inc/connection.php');
I would also like to put javascript files in the 'inc' directory and access them via the src path in HTML. I have tried the same approach as with the php file - that is using '../inc/' and the file name to access the files and for some reason it is not working:
<script src="../inc/moment.js"></script>
I have read similar queries to this on Stack Overflow and followed the right approach (locally and on server) but for whatever reason it is not accessing the js file. It does work however if I relocate the 'inc' folder to within the 'public_html' folder (for js files only) but this defeats the purpose of what I am trying to achieve - and in my mind should not work.
Does php treat the access of directories different to HTML's src hence different behaviour using '../'. I don't think it should and yet I can't get it to work.
Any help greatly appreciated!
A script tag with a source attribute is html that tells the browser to go get a file. Relative paths can be used, but your js files will need to be accessible to the public; they simply can't be hidden outside of the public root.
PHP is a scripting language running on your server. When it sees ../ in the proper contexts, such as the require_once directive you mention, it translates that into the proper path to the directory you are looking for, so it can look outside of the public directory.
Don't put sensitive items in the js, put them in protected files on the server. If you need the info at runtime, make an ajax call to access and use the data to provide the client with only the information it needs.

Referring another JavaScript file by its relative path from a JavaScript file

I have recently got a chance to explore one famous JavaScript library; In that library, I have found one strange way of referring JavaScript library from HTML page.
The application folder structure looks like this,
index.html contains the reference of subroot.js;
index.html
<head>
<title>Index</title>
<script src="js/subroot.js"></script>
</head>
subroot.js only contains the following code (i.e.,the relative path of root.js)
subroot.js
../../js/root.js
When I try to run the index.html, i get syntax error in the first line of subroot.js
Questions:
Is it right way to refer another javascript library by its relative path?
If yes, Why I get error message on the web page?
JavaScript by itself doesn't support loading files or referring paths. You need a module loader of some kind to achieve what you want. With the new version of the standard (ECMAScript 6) there is something called "imports" which you might find useful. I have experience using JSPM and the SystemJS module loader, which makes it pretty easy to connect the dots.
However, without using any additional tools you should just inject another script tag in your HTML.
Just reference root.js in the HTMl file not in the Subroot.js file, you can't reference another .js file from a .js file as far as I know.
<script src="../js/root.js"></script>
See Link
write this in subroot.js file
var x = document.createElement('script');
x.src = '../../js/root.js';
document.getElementsByTagName("head")[0].appendChild(x);

How to reference javascript which is in the parent folder?

I have a web applictaion which use has the following folder structure
application_root
js
in the html, I refer the js like
<script src="../js/****"></script>
everything is file if I start the html page using file:///protocol, but when I use the web server, like http://loclahost:6000/application_root, I found the js cannot be loaded correctly.
How to solve this issue?
You need to start your path with /: <script src="/js/some.js"></script>
Anyway, this can be problematic because if you use a virtual directory, / won't work since it's the root path.
For example: /js/some.js is http://localhost/js/some.js, and if your web site is hosted in a virtual directory like http://localhost/myapp/js/some.js this approach won't work.
If you find above case part of your issue, you might need to use server-side code to get your application root (i.e. /myapp/) so you can concatenate /myapp/ to js/some.js and get the right URI.

what is src for script tags when they are in php include files

If I have a php include file which includes a <script src = > tag, where is the src relative to?
Is it relative to the original file or the include file?
If anyone could point me to a really good reference as I am moving a site around and all the paths are out and there are php include paths, css paths, image paths and javascript paths and they all have a different set of rules and now i have brain overload so asking for help :(
Thanks
Since the src attribute is evaluated by the browser when it reads the HTML, it would be relative to the path in the browser. For example if the page is at http://example.com/posts/show.php, then src="script.js" would go to http://example.com/posts/script.js.
It is also possible to make it independent of the URL by using an absolute path: src="/script.js" would point to http://example.com/script.js.
If you include a file in PHP it is the equivalent of copy and pasting the included file into the original file before it is processed. So the path is relative to the file that does the including.
folder/file.php:
<?php
echo("<img src='flower.png'>");
?>
index.php:
<?php
include("folder/file.php");
?>
In this example, flower.png will only be shown if it is in the same directory as index.php
Try and use absolute urls wherever possible though, like:
http://localhost/this/stuff.php
http://yoursite.com/this/stuff.php
instead of this/stuff.php
Include function generally do as it says. It include the data into your file, which means that the included data will act like it come from the file you include into. So it's relative to the original file.
http://www.php.net/manual/en/function.include.php

Categories