For some reason my html file's request for my jquery.js file fails, however when I enter that exact url into a new tab in the browser, I get the exact jquery.js file I am trying to get when the website loads.
My code is as such:
<script src="js/jquery.js"></script>
and my website is here. If you append jquery.js to the root, you will see the exact file.
Can anyone explain why the file isn't properly retrieved when the website loads?
Any help is greatly appreciated.
At the beginning of your HTML file is this:
<!DOCTYPE html>
<html manifest="appcache.appcache">
The appcache.appcache refers to the file appcache.appcache whose content is:
CACHE MANIFEST
# V1.65 1-18-2013 10:15 PM
# cache
index.html
about.html
services.html
contact.html
css/signika.css
css/mq.css
css/index.css
css/about.css
css/services.css
css/contact.css
assets/signika_400.woff
assets/signika_600.woff
js/html5.js
js/index.js
js/mq.js
js/services.js
mail.php
images/chicken.png
images/salad.png
images/soup.png
images/steak.png
images/wontons.png
As you can see jQuery.js is not there. I suggest you to add js/jQuery.js into a new line and try again.
I figured this out by:
Running the Fiddler software side by side with Chrome (on Windows).
Loading your website in Chrome with Developer Tools (Ctrl+Shift+I on Windows, Command ⌘+Option ⌥+I on Mac), then go to the Network tab.
Then I see that Chrome loads appcache.appcache from the second time onwards and there's an error when loading jQuery.js.
The manifest attribute refers to the HTML5 cache manifest file.
Tutorial:
http://www.html5rocks.com/en/tutorials/appcache/beginner/
More references:
http://caniuse.com/#search=manifest (browser compatibility)
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5 (wiki)
https://www.google.com/search?q=html5+manifest
It's probable that the HTML file containing the script header in question is not in the "root" but perhaps in the same JS folder or somewhere else.
So technically this should work:
<script src="/js/jquery.js"></script>
Just keep in mind that this path is relative.
Related
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 was following the steps and wrote a demo HTML. Here are the steps in the README of https://github.com/commonmark/commonmark.js#commonmarkjs :
For client-side use, you can do make dist to produce
a standalone JavaScript file js/dist/commonmark.js,
suitable for linking into a web page, or fetch the latest
from
https://raw.githubusercontent.com/jgm/commonmark.js/master/dist/commonmark.js,
or bower install commonmark.
Here is my demo HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://raw.githubusercontent.com/jgm/commonmark.js/master/dist/commonmark.js"></script>
<script>
window.onload = function() {
console.log(commonmark)
}
</script>
<body></body>
</html>
Here is a JSFiddle URL for my demo: https://jsfiddle.net/y3xohp7x/
I saved this HTML locally in a file named foo.html and opened this local file with Firefox 55.0.1.
But if I load it with Firefox 55.0.1, I get the following errors in the console.
Loading failed for the <script> with source “https://raw.githubusercontent.com/jgm/commonmark.js/master/dist/commonmark.js”. foo.html:5
ReferenceError: commonmark is not defined foo.html:9:5
Questions:
Why does this error occur?
How can I resolve this error without having to copy commonmark.js to the local filesystem?
Is it a bug in the commonmark.js README documentation that I quoted above or is it an error in my understanding of the documentation?
Edit
Actually, there apparently is a way to do this for github content in particular: https://rawgit.com/
This website gives you a link to a version of the script that will be served with the correct MIME-type.
So this should load the script properly for you:
<script type="application/javascript" src="https://cdn.rawgit.com/jgm/commonmark.js/master/dist/commonmark.js"></script>
https://jsfiddle.net/w1uvq59r/
Original Answer
The reason is that the script source is sent back with the headers:
"Content-Type": "text/plain"
"X-Content-Type-Options": "nosniff"
The latter header prevents the browser from executing the script due to the fact that the content-type is not executable, like "application/javascript". Which means unfortunately there is really no way to get the script to load remotely. Here is a thread with more information on a similar problem.
The only solution, as far as I can tell, is to load it locally, like so:
<script type="application/javascript" src="path/to/the/file.js"></script>
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
I've installed CentOS and LAMP on an old desktop at home to practice system administration and webadmining, but I'm running into a strange problem.
I have a webpage that's no more than:
<!DOCTYPE html>
<html
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>
The chrome console is telling me that the request for test.js is failing. When I right click the link it gives and open it in a new tab, it correctly shows.
Is there a setting in apache that I need to set for this to work?
edit: Only thing in the logs is about the favicon
edit:
Some additional details: I'm accessing via the local ip of the machine, external script and stylesheet requests work, and all the files are in the same directory.
edit: Using fiddler, it looks like chrome isn't even sending out the request for the files.
edit: The response headers for the webpage include "Connection: close"
Make sure that file with that HTML code, and test.js are in the same directory.
I suspect that's the problem.
If you double click file on your system it's not opened via apache.
If you are opening html by
http://localhost/test.html
Then chrome will search to test.js in
http://localhost/test.js
In the VS2010 IDE when a breakpoint (or an error) is hit, it opens a read-only [dynamic] version of the external JavaScript file I referenced. My workflow would be vastly improved if I could immediately edit this file, and refresh the browser. That is as opposed to digging up the original JS file opening it, finding the correct line and editing there.
I only know that this is possible because I was able to do this on my old work computer configuration, but for the life of me I can't duplicate it at home.
Has anyone made this work? Perhaps an extension? or maybe it has to with the way the files are referenced, or my basehref tag, or url rewriting.
This happens when the base href specifies a domain other than localhost. My issue was that to enable a local environment for Facebook JS, I need my domain in the url. So I set up my host file to remap localhost.mydomain.com to localhost.
When the Visual Studio IDE encounters a file reference which is something other than localhost, it does not attempt to grab the local file since it assumes (correctly in most cases) that it is being served from another site. In these cases it loads a file as [dynamic] and readonly.
Here is the test case:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://localhost.mydomain.com/virtual-directory/" />
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</html>
Any breakpoint within test.js will result in opening a readonly dynamic file.
how are you referencing your files? whenever a script block is written inside the html or is dynamically inserted the debugger will open the instance of the page where the code stops. If you reference the script using tags vs should open the original script file (at least that's what it does on my machine). could you upload an example of your current structure?