I am trying to include 5 javascript files which I have written to an HTML file.
However, there is an error message that the files are fail to load.
Source code:
<html class="gr__2k8dc"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Toilet partition tool</title>
<link rel="stylesheet" href="C:\Users\Downloads\3dmodelproject\files\style.css">
<script src="C:\Users\Downloads\3dmodelproject\files\three.js"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\STLLoader.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\OrbitControls.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\resources.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\toiletpartition.js.download"></script>
</head>
The error message:
Any clue what's wrong with the path format? Thanks!
As mentioned elsewhere, your paths are absolute paths, rather than relative paths. Essentially what this means, is you've hard-coded the locations of your assets (scripts/css/images/etc), making it very difficult to deploy the site, or move the location of your site on your local drive.
In addition, it causes problems with cross origin requests (the actual error you're seeing). Using a relative path resolves that issue, as you're guaranteed to be referencing the same origin.
You mentioned in your comment, the html file is: C:/Users/Downloads/3dmodelproject/files/Toiletpartitiontool.html
Thus, the relative location here is
C:/Users/Downloads/3dmodelproject/files
In order to then reference
C:\Users\Downloads\3dmodelproject\files\three.js, you simply need to use three.js.
Thus, your page should be:
<html class="gr__2k8dc">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Toilet partition tool</title>
<link rel="stylesheet" href="style.css">
<script src="three.js"></script>
<script src="STLLoader.js.download"></script>
<script src="OrbitControls.js.download"></script>
<script src="resources.js.download"></script>
<script src="toiletpartition.js.download"></script>
</head>
<body>
<!-- Content here -->
</body>
</html>
The reason is that only IE/Windows is happy with C:/
Try changing the drive to a series of ../
Each one of those will raise the folder level one. Eventually it will get to the root of the drive/domain and then go down the folders to your file. Depending on where you are running the html file will decide how many ../ to add. Linux and Mac don't use windows drive letters so this is also cross OS compatible.
The link would become:
../../../../Users/Downloads/3dmodelproject/files/STLLoader.js.download
I'm 90% sure this is the problem you are having
The reason may be your \, which the html requires /
But bonus:
Can you make the scripts to be the relative path to the index.html?
Make the path to be like <script src="/3dmodelproject/files/three.js"></script>
Related
I have an issue with a website I built from angular. In index.html, there are references to javascript files, but my problem is this: in the HTML, the paths are relative to the file but the browser looks for the files in the root dir:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RasaBE</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-->
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
This works fine when everything is in the root folder of my website, but I wanted to have everything in a subfolder /bo/. So index.html is in localhost/bo/index.html and so are all the scripts. Since it's a relative path in the code I'd expect my browser to look for localhost/bo/script.js, but instead it looks for localhost/script.js.
A screenshot to show what's wrong:
I tested this in Chrome and I have the same issue. It's a bit complicated to change the paths directly since it's compiled from angular, and I'd probably have to change it every time it compiles. Is this an issue with Firefox and the way it deals with relative paths?
I should also add that host/bo/inline.bundle.js exists and can be found by the browser but the it looks for it in the root folder instead of the same folder as index.html.
This "base" element sets the default location for the page.
Remove
<base href="/">
OR
<base href="/bo/">
If you want your Angular Webapp run from every subfolder without touching the code
Change
<base href="/">
To
<base href=".">
Removing the "base" element won't work since Angular throws then an error complaining about the missing element.
It turns out it was all because of the tag that is added by angular, editing it to <base href="/bo/"> makes it work. since it's just one line to change I consider it fixed.
I'm using facebook web hosting for my canvas game assets and I keep getting 404 errors when they attempt to get loaded.
My index.html file loads correctly. My assets are all being loaded relative to my index.html file, which resides in the root directory.
The zip file I upload is structured like so:
Here are the errors I receive in the console when I try to load my canvas page in facebook; all 404s:
Here is the index.html file...
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<meta charset="utf-8" />
<title>Title Here</title>
<link rel="stylesheet" type="text/css" href="/styles/main.css">
<link rel="stylesheet" href="lib/flexboxgrid.min.css">
</head>
<body>
<div id="canvasContainer"></div>
<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>
<script src="lib/pixi.min.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="bundle.js"></script>
</body>
</html>
It seems like the resources simply aren't being uploaded.
I also noticed my index.html after looking at the dev tools networking tab is being loaded from https://apps-<acc_key>.apps.fbsbx.com/bundle/<randomnumbers>/<more random numbers>/index.html?signed_request=..... location.
However, my other resources don't have 'bundle/<randomnumbers>/<more random numbers>/' apart of their address location. I attempted to load the resources up directly in the browser but I get a 403 Denied error. I even attempted to append the signed_reqeust token but no luck either; same 403 error.
Most of the the problem is from <base href="/" /> tag.
Web Hosting Documentation
It's very important that the generated index.html file is located at
the root of the zip file, as this is the only place we can launch the
content. All other URLs need to be a relative path.
Correct Relative urls
<link href="styles.css" rel="stylesheet"/>
or
<link href="./styles.css" rel="stylesheet"/>
Result url will be in the following format:
https://apps-<app id>.apps.fbsbx.com/bundle/<another id>/<another id>/styles.css
Incorrect Absolute urls
<link href="/styles.css" rel="stylesheet"/>
https://apps-<app id>.apps.fbsbx.com/styles.css
And when you use <base href="/" /> the HTML element specifies the base URL to use for all relative URLs contained within a document. so basically you use absolute path, when you should rely on facebook web hosting to resolve the path
So change /styles/main.css to styles/main.css and remove <base href="/" />
I've been having issue linking in the JQuery api into my html page. I've spent a lot of time trying to figure it out myself, but haven't made any progress, and would really appreciate anyone's help! Like I mentioned in the title, it works fine when I link to a hosted version of JQuery, but when I try to use a local version, I have no success (I need to work locally for what I'm using it for). Side Note: I downloaded the files directly from JQuery's site, and put them in the root folder for simplicity.
Please see the code below...
This does not work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
</head>
<body>
</body>
But this does work properly:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
</body>
Maybe it's the order the scripts are coming in - your working version has jQuery first, then mobile, while the non-working one has the opposite. If that doesn't fix it, double-check that your file paths are all correct - the way it's written, your html file must be in the same folder as the scripts. If it's not, try prepending a slash: <script src="/jquery-2.2.3.js"> to force it to look at the root folder.
One way to confirm whether that's the issue is to check your browser dev tools. If you're in chrome, right click -> inspect element, and find the Network tab. Reload your page while you've got that open and see if your page is successfully loading the scripts. If you see the names of those scripts in red, it means they weren't found or couldn't be loaded.
Last thought: if you're working on your local site via opening a file:// path, the JS you can use will be restricted; this is a security feature. To get around it, run your site on a local server. Mac OS X has a built-in one, or you can use PHP or python to get one up and running immediately from the command line, or install a library like pow or serve. Google around for 'local web server setup', there are tons of options.
I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well
I'm having a bizarre situation here where my external site files, both JavaScript and CSS, are being interpretted as somehow corrupt on Safari browsers. The same site looks fine in Internet Explorer, but on Safari the javascript and css are being completely ignored. If I look at the files through the Inspector, I can see that Safari views these files as containing junk characters -- either asian symbols or square boxes. When I navigate directly to the files, however, they appear just fine. See the site below, viewed in Safari 5, for an example:
http://amsoell.com/dch/castlemoore
If I embed the same exact CSS or JavaScript into the HTML itself, it renders perfectly. I don't know if this is a server issue or something in my CSS, but I'm at my wits end here.
I checked your website for validation and it's not valid. But the most interesting thing is that your enconding is utf-16le. You should put your encoding to utf-8. Just put the following line in your <head> section:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
Include the charset="utf-8" parameter in your <script> and <link> tags:
<script type="text/javascript" charset="utf-8" src="script.js"></script>
<link rel="stylesheet" type="text/css" charset="utf-8" href="style.css">
The problem can be solved by saving the html page in "Windows-1252 Encoding".