I'm sorry for simple question. I need determinate jquery in my project, actually when I used to insert direct link to <script>. It works:
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript">
But when I use relative path it doesn't work.
<script src="js/jquery-1.11.1.js" type="text/javascript" >
this is my directory:
Your main file and jquery file are in different folders.
Main file in scripts/ folder and jquery file in js/ folder.
Just change path to:
../js/jquery-1.11.1.js
../ directory means scripts/ folder.
So your code will be:
<script src="../js/jquery-1.11.1.js" type="text/javascript" >
Remember, file names in folders and in your code must be the same.
Hope it'll help :)
Your js folder should be in your public folder.
In your layout try this:
<?php echo $this->headScript()->appendFile($this->baseUrl().'/js/jquery-1.11.1.min.js'); ?>
Unless you have a compelling reason to use relative paths, I suggest using an absolute path. It will not break if your page moves to a new location:
<script src="/scripts/js/jquery-1.11.1.min.js" type="text/javascript" >
Related
I'm using Aurelia CLI (v1.2.0) with webpack (v4.41.0). Running the command au build --env prod works well and all necessary files are placed in a dist folder relative to the project's root as expected. However, a problem I'm seeing is the following in the generated .html file:
...
<body aurelia-app="main">
<script type="text/javascript" src="/runtime~app.66066bc9a3f8c86e3d5a.bundle.js"></script>
<script type="text/javascript" src="/vendor.bluebird~01be3b92.3dbcbc269195ad05c865.chunk.js"></script>
<script type="text/javascript" src="/vendor.setimmediate~a1c951f6.42ef81a6d814b4bc894f.chunk.js"></script>
<script type="text/javascript" src="/vendor.process~16c59945.ef28f3259f949d41518b.chunk.js"></script>
<script type="text/javascript" src="/vendor.moment~399b027d.9b9b0283b72b7237fb27.chunk.js"></script>
...
You see the src="/file_name_here" part in these script tags is not going to work as it's looking for files at the root of the main hard disk, not relative to the HTML file. If I add src="../file_name_here" then all works fine. Am I missing a webpack configuration somewhere?
Thanks for the assistance.
in your project, you have a webpack.config.js file.
there you should find the baseUrl property. change it to whatever suits you best.
for example: I want the bundle files to be in the same directory of the index.html file, regardless of their respective path on the server. (they will not always be in the root of my server).
so I just change the default '/' to '' (empty string.)
This question already has answers here:
What does "./" (dot slash) refer to in terms of an HTML file path location?
(12 answers)
Closed 3 years ago.
Given the following project structure:
/root
/static
script.js
page.html
This will 'import' script.js, into the HTML file:
<html>
<head>
<script src="/static/script.js"></script>
</head>
<body>
...
</body>
</html>
this will, as well:
<html>
<head>
<script src="./static/script.js"></script>
</head>
<body>
...
</body>
</html>
I am wondering:
Is one way preferred over the other?
Are there any cases, when / and ./, in she src attribute of <script> will behave differently?
Yes, They both are different.
You are not able to see as the index.html is already in your root directory.
If there is a .html file inside a directory. Then you can see the difference.
./ This gives a relative path from the file you are accessing it
/ This gives an absolute path from the root of your directory
If this is the directory structure
/root
/static
script.js
/page
index.html
Then, you won't be able to use ./ as it won't find script folder in the page folder
So, if you have a complex directory structure use ./ i.e. relative path, and if you have a plain structure / i.e. absolute path would be good. For better practice, the relative path is preferred over an absolute path.
Hope, this answered your question.
Now, I am not super experienced in JavaScript, but I'll let you know what I know.
[...]
<script src="./static/script.js"></script>
[...]
<!--This would reference files in the current folder (where the webpage itself is stored)-->
[...]
<script src="/static/script.js"></script>
[...]
<!--This would reference an absolute path within your webserver, and cannot change dynamically based on from where you load it.-->
Generally speaking, I'd go for ./ when you load it from a file in your current folder (and/or server), whilst doing / seems like an external reference to me, which is also not dynamic. If you happen to move the file (if it was in the same directory as your page), I think JavaScript would also reference the new file instead of complaining about the old one.
I cannot guarantee that any of the info above is correct as I am not a really good JS-Developer, but at least this should help you figure out the syntax a little more.
./ is a relative path or the current directory where your asset will be served.
/ is an absolute path or the root path from where your asset will be served.
./ is a relative path linking to the current directory.
/ is an absolute path linking to the root directory.
You can find more information here.
I am trying to load different JS file in Angular for different environment because the prefix for my js file is different and I can't save them in my local.
in dev
js file path is http://myproject-dev.com/product.js
so my html will be like
<script src="http://myproject-dev.com/product.js"></script>
prod
js file path is http://myproject.com/product.js
my html is like
<script src="http://myproject.com/product.js"></script>
I need to load them based on the environment, I have a variable set in JS to detect the environment but I don't know how to load them in html or in run time in Angular. Any tips will be appreciated. Thanks!
Use a relative URL.
Same position: <script src="product.js"></script>.
With a subfolder from current position: <script src="scripts/product.js"></script>
With a subfolder from root: <script src="/scripts/product.js"></script>
You can simply use relative paths to reference your files rather than using the full URL.
if you directory structure looks like this:
js
product.js
index.html
then inside of index.html you can reference product.js like this:
<script src="js/product.js"></script>
I have a website where I am referencing the CSS/JS in the root directory. I want to create a sub-section of the website under it's own directory. The problem is that I am referencing the
CSS/JS in the main directory and I want to know what the best way to reference the CSS/JS would be for the subdirectory.
If I just use the http address for the files it works, but I think there could be a better way to go about this. Does anyone have any opinion on the matter?
You can use ../ to specify the parent directory when using relative paths. So for example, if your file structure is something like this:
root
index.html
style.css
javascript.js
subdirectory
subpage.html
Then in your subpage.html file, use:
<link rel="stylesheet" href="../style.css">
<script src="../javascript.js"></script>
I'm having some trouble with the following code within my Index.html file:
<SCRIPT LANGUAGE="JavaScript" SRC="clock.js"></SCRIPT>
This works when my Index.html file is in the same folder as clock.js. Both Index.html and clock.js are in my root folder.
But when my index.html is in these different directories clock.js does not load:
/products/index.html
/products/details/index.html
What can I put as the 'SRC' so that it will always look for clock.js in the root folder?
Try:
<script src="/clock.js"></script>
Note the forward slash.
Use an relative path to the root of your site, for example:
If clock.js is on http://domain.com/javascript/clock.js
Include :
<script language="JavaScript" src="/javascript/clock.js"></script>
If it's on your domain root directory:
<script language="JavaScript" src="/clock.js"></script>
The common practice is to put scripts in a discrete folder, typically at the root of the site. So, if clock.js lived here:
/js/clock.js
then you could add this code to the top of any page in your site and it would just work:
<script src="/js/clock.js" type="text/javascript"></script>
This works:
<script src="/clock.js" type="text/javascript"></script>
The leading slash means the root directory of your site. Strictly speaking, language="Javascript" has been deprecated by type="text/javascript".
Capitalization of tags and attributes is also widely discouraged.
Piece of cake!
<SCRIPT LANGUAGE="JavaScript" SRC="/clock.js"></SCRIPT>
src="/clock.js"
be careful it's root of the domain.
P.S. and please use lowercase for attribute names.
If you have
<base href="/" />
It's will not load file right. Just delete it.
As you haven't specified, I don't know if you are working with flask (Python), but if you are, you have to put the JavaScript file in a directory called static. It should look something like this:
/ProjectName
/static
clock.js
/templates
index.html
main.py
And then refer to the js file as following:
<script src="/static/clock.js"></script>
As your clock.js is in the root, put your code as this to call your javascript in the index.html found in the folders you mentioned.
<SCRIPT LANGUAGE="JavaScript" SRC="../clock.js"></SCRIPT>
This will call the clock.js which you put in the root of your web site.