My HTML file can't load my PDE files in browser?
up vote
1
down vote
favorite
I have created a sketch file using processing.js and saved it to a pde file. I saved the processing.js source file, my html file, and my sketch pde file and get the following error in the chrome console:
"XMLHttpRequest failure, possibly due to a same-origin policy violation."
I feel that my html is correct in terms of the source integration and my pde file is saved correctly, so I'm not to sure why the html file isn't loading the sketch.
Here are my following files:
hello_web.pde:
void setup() {
size(200, 200);
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
println("hello web!");
}
hello_web.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing-1.0.0.min.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based
sketch:</p>
<canvas data-processing-sources="hello-web.pde"> .
</canvas>
</body>
</html>
Thanks!
processing processing.js
edited Nov 22 at 6:52
Kevin Workman
33.2k53968
asked Nov 22 at 4:42
Labib Hussain
82
add a comment |
up vote
1
down vote
favorite
I have created a sketch file using processing.js and saved it to a pde file. I saved the processing.js source file, my html file, and my sketch pde file and get the following error in the chrome console:
"XMLHttpRequest failure, possibly due to a same-origin policy violation."
I feel that my html is correct in terms of the source integration and my pde file is saved correctly, so I'm not to sure why the html file isn't loading the sketch.
Here are my following files:
hello_web.pde:
void setup() {
size(200, 200);
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
println("hello web!");
}
hello_web.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing-1.0.0.min.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based
sketch:</p>
<canvas data-processing-sources="hello-web.pde"> .
</canvas>
</body>
</html>
Thanks!
processing processing.js
edited Nov 22 at 6:52
Kevin Workman
33.2k53968
asked Nov 22 at 4:42
Labib Hussain
82
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have created a sketch file using processing.js and saved it to a pde file. I saved the processing.js source file, my html file, and my sketch pde file and get the following error in the chrome console:
"XMLHttpRequest failure, possibly due to a same-origin policy violation."
I feel that my html is correct in terms of the source integration and my pde file is saved correctly, so I'm not to sure why the html file isn't loading the sketch.
Here are my following files:
hello_web.pde:
void setup() {
size(200, 200);
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
println("hello web!");
}
hello_web.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing-1.0.0.min.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based
sketch:</p>
<canvas data-processing-sources="hello-web.pde"> .
</canvas>
</body>
</html>
Thanks!
processing processing.js
edited Nov 22 at 6:52
Kevin Workman
33.2k53968
asked Nov 22 at 4:42
Labib Hussain
82
I have created a sketch file using processing.js and saved it to a pde file. I saved the processing.js source file, my html file, and my sketch pde file and get the following error in the chrome console:
"XMLHttpRequest failure, possibly due to a same-origin policy violation."
I feel that my html is correct in terms of the source integration and my pde file is saved correctly, so I'm not to sure why the html file isn't loading the sketch.
Here are my following files:
hello_web.pde:
void setup() {
size(200, 200);
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
println("hello web!");
}
hello_web.html:
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing-1.0.0.min.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based
sketch:</p>
<canvas data-processing-sources="hello-web.pde"> .
</canvas>
</body>
</html>
Thanks!
processing processing.js
processing processing.js
edited Nov 22 at 6:52
Kevin Workman
33.2k53968
asked Nov 22 at 4:42
Labib Hussain
82
edited Nov 22 at 6:52
Kevin Workman
33.2k53968
asked Nov 22 at 4:42
Labib Hussain
82
edited Nov 22 at 6:52
Kevin Workman
33.2k53968
edited Nov 22 at 6:52
Kevin Workman
33.2k53968
edited Nov 22 at 6:52
Kevin Workman
33.2k53968
33.2k53968
asked Nov 22 at 4:42
Labib Hussain
82
asked Nov 22 at 4:42
Labib Hussain
82
asked Nov 22 at 4:42
Labib Hussain
82
82
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
2
down vote
This is because Chrome treats file:/// differently from http(s)://, and the JavaScript calling other files locally is violating the same-origin policy. So, you will need to run this from a local server so that you have the http:// in front of your address. You can read more about this on their wiki.
If you're looking to easily launch a server, running python -m http.server (this is assuming Python 3, you may need to run python -m http.server) will serve the current directory, so just navigate to the correct directory and run that command, and then visiting http://localhost will allow you to access your files from a local server.
answered Nov 22 at 5:18
Unsolved Cypher
500314
add a comment |
up vote
0
down vote
In addition to Unsolved Cypher's answer, note that you can also put all of your content in a single file, like this:
<!DOCTYPE html>
<html>
<head>
<title>My Sketch</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
</head>
<body>
<script type="application/processing">
void setup(){
size(200, 200);
}
void draw(){
background(64);
ellipse(mouseX, mouseY, 20, 20);
}
</script>
<canvas> </canvas>
</body>
</html>
Or you could use a free webhost, or a service like CodePen. Here is a template I use for Processing.js sketches on CodePen.
Shameless self-promotion: here is a tutorial on Processing.js.
answered Nov 22 at 6:51
Kevin Workman
33.2k53968
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
This is because Chrome treats file:/// differently from http(s)://, and the JavaScript calling other files locally is violating the same-origin policy. So, you will need to run this from a local server so that you have the http:// in front of your address. You can read more about this on their wiki.
If you're looking to easily launch a server, running python -m http.server (this is assuming Python 3, you may need to run python -m http.server) will serve the current directory, so just navigate to the correct directory and run that command, and then visiting http://localhost will allow you to access your files from a local server.
answered Nov 22 at 5:18
Unsolved Cypher
500314
add a comment |
up vote
2
down vote
This is because Chrome treats file:/// differently from http(s)://, and the JavaScript calling other files locally is violating the same-origin policy. So, you will need to run this from a local server so that you have the http:// in front of your address. You can read more about this on their wiki.
If you're looking to easily launch a server, running python -m http.server (this is assuming Python 3, you may need to run python -m http.server) will serve the current directory, so just navigate to the correct directory and run that command, and then visiting http://localhost will allow you to access your files from a local server.
answered Nov 22 at 5:18
Unsolved Cypher
500314
add a comment |
up vote
2
down vote
up vote
2
down vote
This is because Chrome treats file:/// differently from http(s)://, and the JavaScript calling other files locally is violating the same-origin policy. So, you will need to run this from a local server so that you have the http:// in front of your address. You can read more about this on their wiki.
If you're looking to easily launch a server, running python -m http.server (this is assuming Python 3, you may need to run python -m http.server) will serve the current directory, so just navigate to the correct directory and run that command, and then visiting http://localhost will allow you to access your files from a local server.
answered Nov 22 at 5:18
Unsolved Cypher
500314
This is because Chrome treats file:/// differently from http(s)://, and the JavaScript calling other files locally is violating the same-origin policy. So, you will need to run this from a local server so that you have the http:// in front of your address. You can read more about this on their wiki.
If you're looking to easily launch a server, running python -m http.server (this is assuming Python 3, you may need to run python -m http.server) will serve the current directory, so just navigate to the correct directory and run that command, and then visiting http://localhost will allow you to access your files from a local server.
answered Nov 22 at 5:18
Unsolved Cypher
500314
answered Nov 22 at 5:18
Unsolved Cypher
500314
answered Nov 22 at 5:18
Unsolved Cypher
500314
answered Nov 22 at 5:18
Unsolved Cypher
500314
500314
add a comment |
add a comment |
up vote
0
down vote
In addition to Unsolved Cypher's answer, note that you can also put all of your content in a single file, like this:
<!DOCTYPE html>
<html>
<head>
<title>My Sketch</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
</head>
<body>
<script type="application/processing">
void setup(){
size(200, 200);
}
void draw(){
background(64);
ellipse(mouseX, mouseY, 20, 20);
}
</script>
<canvas> </canvas>
</body>
</html>
Or you could use a free webhost, or a service like CodePen. Here is a template I use for Processing.js sketches on CodePen.
Shameless self-promotion: here is a tutorial on Processing.js.
answered Nov 22 at 6:51
Kevin Workman
33.2k53968
add a comment |
up vote
0
down vote
In addition to Unsolved Cypher's answer, note that you can also put all of your content in a single file, like this:
<!DOCTYPE html>
<html>
<head>
<title>My Sketch</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
</head>
<body>
<script type="application/processing">
void setup(){
size(200, 200);
}
void draw(){
background(64);
ellipse(mouseX, mouseY, 20, 20);
}
</script>
<canvas> </canvas>
</body>
</html>
Or you could use a free webhost, or a service like CodePen. Here is a template I use for Processing.js sketches on CodePen.
Shameless self-promotion: here is a tutorial on Processing.js.
answered Nov 22 at 6:51
Kevin Workman
33.2k53968
add a comment |
up vote
0
down vote
up vote
0
down vote
In addition to Unsolved Cypher's answer, note that you can also put all of your content in a single file, like this:
<!DOCTYPE html>
<html>
<head>
<title>My Sketch</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
</head>
<body>
<script type="application/processing">
void setup(){
size(200, 200);
}
void draw(){
background(64);
ellipse(mouseX, mouseY, 20, 20);
}
</script>
<canvas> </canvas>
</body>
</html>
Or you could use a free webhost, or a service like CodePen. Here is a template I use for Processing.js sketches on CodePen.
Shameless self-promotion: here is a tutorial on Processing.js.
answered Nov 22 at 6:51
Kevin Workman
33.2k53968
In addition to Unsolved Cypher's answer, note that you can also put all of your content in a single file, like this:
<!DOCTYPE html>
<html>
<head>
<title>My Sketch</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
</head>
<body>
<script type="application/processing">
void setup(){
size(200, 200);
}
void draw(){
background(64);
ellipse(mouseX, mouseY, 20, 20);
}
</script>
<canvas> </canvas>
</body>
</html>
Or you could use a free webhost, or a service like CodePen. Here is a template I use for Processing.js sketches on CodePen.
Shameless self-promotion: here is a tutorial on Processing.js.
answered Nov 22 at 6:51
Kevin Workman
33.2k53968
answered Nov 22 at 6:51
Kevin Workman
33.2k53968
answered Nov 22 at 6:51
Kevin Workman
33.2k53968
answered Nov 22 at 6:51
Kevin Workman
33.2k53968
33.2k53968
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424007%2fmy-html-file-cant-load-my-pde-files-in-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
