I work with Netbeans 8.2 and I created a Web Application. I have a html and a js.
The html is
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
<script type="text/javascript" src="js1.js"></script>
</body>
</html>
The project's structure is
I want to include the js1.js.
When I run the application in the browser's console I get a 404
GET http://localhost:8080/Prueba/js1.js [HTTP/1.1 404 Not Found 2ms]
Why do I get this 404?
file js1.js has to be inside the web directory(in netbeans) and not outside as you show in the image
Related
I am new to JS. I made a simple Snake game using vanilla JS in VS Code. There is minimal CSS in the code so I put that in the html.
When I open the index.html from VS Code with Live Server (http://127.0.0.1:5500/) it works fine.
But when I open it from the file explorer (file:///D:/Prog/Javascript/VanillaJS_projects/Snake/index.html) only the html gets loaded, no Snake and Food pieces appear. And the same happens if I try to open it with htmlpreview.github.io
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
<script src="game.js" defer type="module"></script>
<style>
...
</style>
</head>
<body>
<div id="game-board"></div>
</body>
</html>
It doesn't matter what browser I use, I get the same result.
What is the difference? Why won't it load properly?
You browsers honor Content Security Policy.
If you open file:/// URLs, you may think of your browser as a poor man's file viewer.
We are building a Cordova iOS App, with a HTML page showing another online page. It is working fine in Safari, but doesn't work when we build the app.
Here is the code we tried. It works on Safari (on Mac and iPhone 7), but doesn't work on iOS as a Cordova App
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>In My Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div class="embed-responsive embed-responsive-16by9">
<object type="text/html" data="https://mylink.com/../index.html">
</object>
</div>
<script type="text/javascript" src="../cordova.js"></script>
<script type="text/javascript" src="../js/landscape.js"></script>
</body>
</html>
Some possible causes we thought of:
The app needs a special permission (?)
The HTML code needs some parameters (?)
Something else (??)
Thanks!
You can use an iframe:
<iframe src="https://mylink.com/../index.html">
</iframe>
but you can have some troubles if it's not the same domain (https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
A good alternative is to use zoid (https://github.com/krakenjs/zoid).
Is there any decent procedure to compile html, css, and js files into one js file? I've been looking on methods how to load css and html files to js, and they all require requireJS. Is there any webpack plugin, or just a module for this?
I know this is not a decent question, but I've been thinking on not always fetching an external source file (html, css).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blah blah blah</title>
<script src="something.js"></script>
<script>
// 'load' will load everthing to #something
something.load(
// options
)
</script>
</head>
<body>
<div id="something"></div>
</body>
</html>
Finally, thanks to this article, all I need is html-loader. Then I can just add import html from 'some.html'.
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 working on a wireless robotics project utilizing node.js and jquery to create a webpage "controller".
Currently, my code is as below, however its functionality is limited to working with an internet connection due to the downloading of the scripts through the internet addresses. My goal is to allow this to function without internet connectivity
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- jQuery and jQuery Mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
In order to try to save these files to the beaglebone locally, I created 3 files: Source1.css Source2.js and Source3.js which are copied and pasted into their respective files from the HTML links in the code above and stored in the same directory as the html and javascript files used for the server.
I have edited the code to appear as below
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- jQuery and jQuery Mobile -->
<link rel="stylesheet" href="Source1.css" />
<script src="Source2.js"></script>
<script src="Source3.js"></script>
<script src="/socket.io/socket.io.js"></script>
However when I attempt to start the server using the node command, only the HTML appears to load in the webpage. I have attempted changing the charset and including the entire path to the jquery source files with no success. Any help would be greatly appreciated!
Disconnect from the Internet. Press Ctrl+Shift+I in the Chrome browser to load developer tools, change to the "Network" tab then press F5 to refresh the page. You will see the resources your page loaded (and some it attempted to load). Sort these results by the Initiator column. You will likely find Socket.IO initiated dependencies that failed to load.