I'm trying something really simple but for some reason it doesn't work :
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>SyriLab</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header></header>
<div id="content"></div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/poper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/main.js"></script>
</body>
</html>
js/main.js :
window.onload=function(){
main();
}
function main(){
$("header").load("./pages/header.html");
$("#content").load("./pages/home.html");
}
Errors I get when I launch index.html :
Failed to load file:///E:/Dev/Eclipse/SyriLab/pages/header.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Failed to load file:///E:/Dev/Eclipse/SyriLab/pages/home.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Everything is local, same root, I'm just trying to make a basic html page, including bootstrap and jquery (poper too, not sure what it is but was on the bootstrap page). And using something similar to "include" in php, but with regular js and html.
What am I doing wrong here ?
I'm trying something really simple but for some reason it doesn't work :
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>SyriLab</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header></header>
<div id="content"></div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/poper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/main.js"></script>
</body>
</html>
js/main.js :
window.onload=function(){
main();
}
function main(){
$("header").load("./pages/header.html");
$("#content").load("./pages/home.html");
}
Errors I get when I launch index.html :
Failed to load file:///E:/Dev/Eclipse/SyriLab/pages/header.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Failed to load file:///E:/Dev/Eclipse/SyriLab/pages/home.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Everything is local, same root, I'm just trying to make a basic html page, including bootstrap and jquery (poper too, not sure what it is but was on the bootstrap page). And using something similar to "include" in php, but with regular js and html.
What am I doing wrong here ?
Share Improve this question asked Apr 11, 2018 at 4:31 NeSNeS 1471 gold badge3 silver badges10 bronze badges 9-
1
The error tells you... Hint your protocol is
file... Install mongoose. It's a light weight web server for windows and create a host entire that points a made up domain to local Host. – Darkrum Commented Apr 11, 2018 at 4:33 - 1 Is there no other way ? I wanted to be able to experiment without having to run anything. – NeS Commented Apr 11, 2018 at 4:37
- this is a really bad practice to load external html like this. – Wils Commented Apr 11, 2018 at 4:39
- No I'm lying to you. Go install mongoose... It's dead simple. – Darkrum Commented Apr 11, 2018 at 4:41
- Wils : how should I do then ? Darkrum : ok thanks, I just wanted not having to install or run anything, and just launching my page. But If there's no other choice – NeS Commented Apr 11, 2018 at 4:41
2 Answers
Reset to default 2Based on your question, it seems you are trying to access the index.html as a local file. Instead of that, you must use webserver (e.g. nginx, apache etc) to access the file. The jQuery's load method will not be able to load the file due to the protocol used for accessing local file is file://. Such requests are prohibited by the browsers due to security reasons.
Configure a webserver and try to access the index.html using http protocol and your code should work.
As others has stated. You must serve your files using a server.
For that purpose and to avoid software installation use Python.
In your console type:
cd /path/to/my/index.html
// Below is mand line for Python 3.x
python -m http.server
// Below is mand line for Python 2.x
python -m SimpleHTTPServer
By default it will use http://localhost:8000/
This simple server will serve your directory files. Index.html is the empty resource request that the server will try to find and serve.