How to run the .html file in browser? - javascript

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>

Related

Script tag source defaults to URL over path

I'm trying to make a chat application using socket.io and Node.JS. In my html file called index.html, I am trying to use a script tag to point to a script file called bundle.js that contains a browserified set of variables and functions.
The problem is, despite referencing the proper path in my src attribute, the tag seems to include a bundle.js within my localhost:3000.
Oddly enough, when viewing this bundle.js with developer tools, the content seems to be identical to that of my index.html file. This creates a syntax error as the JavaScript file contains html syntax from my html file. Any ideas why this might be?
<script src="bundle.js" type="text/javascript"></script>
This is how the script tag appears in my html file.
This is a link to a screenshot of my developer tools (New here so not enough rep to post the actual pic)
As we can see bundle.js is open in developer tools is Html code, not js that's why error is shown in first line, or there is something wrong in webpack configuration.

I need my ReactJS app working offline without server

I have simple one page html/js/ReactJS app which is used with the help of such scripts added to index.html. It is running without any server, because client needs it to be used only on his computer:
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
How can I make this app working offline? I can use Node Server, but when application is downloaded by client it needs to be opened using the only index.html file.
Just download the three files above:
react : https://unpkg.com/react#16/umd/react.production.min.js
react-dom : https://unpkg.com/react-dom#16/umd/react-dom.production.min.js
babel : https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js
You can do this by going to the src links in your script tags above, right-click the webpage, click Save As, choose file type as JavaScript and then replace the above src links in your index.html to those downloaded files.
You can create a special folder for the site and within the folder, you can paste a copy of your index.html file as well as a js folder and keep the above three downloaded JavaScript files in that js folder.
You can now simply replace the src link in the above three scripts tags like this:
<script src="js/react.production.min.js" />
<script src="js/react-dom.production.min.js" />
<script src="js/babel.min.js" />
However, this only works if the client is just viewing the site. If the client wants to say, edit the files and want something like hot reload, they will need to set up a server for that.

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

Javascript Path Defining

I have two servers where I want to use one script file. One location has URL http://localhost:8080/one/simple/ and the other location is http://localhost:8181. Now I have one html file hosted on both the servers where in order to use that script file I have included it like
<script src="/script.js"></script>
Now this code works fine on http://localhost:8181, but not on http://localhost:8080/one/simple/, console throws an error that the file is not available.
What's the correct way to write the path so that it can work on both the servers?
Can you try following:
<script src='<?Request.ServerVariables("PATH_INFO")?>/script.js'></script>
as suggested in answers to this question.
It is supposed to give you virtual path.

Categories

Resources