My HTML file can't load my PDE files in browser?
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 '18 at 6:52
Kevin Workman
33.8k54069
asked Nov 22 '18 at 4:42
Labib HussainLabib Hussain
82
add a comment |
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 '18 at 6:52
Kevin Workman
33.8k54069
asked Nov 22 '18 at 4:42
Labib HussainLabib Hussain
82
add a comment |
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 '18 at 6:52
Kevin Workman
33.8k54069
asked Nov 22 '18 at 4:42
Labib HussainLabib 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 '18 at 6:52
Kevin Workman
33.8k54069
asked Nov 22 '18 at 4:42
Labib HussainLabib Hussain
82
edited Nov 22 '18 at 6:52
Kevin Workman
33.8k54069
asked Nov 22 '18 at 4:42
Labib HussainLabib Hussain
82
edited Nov 22 '18 at 6:52
Kevin Workman
33.8k54069
edited Nov 22 '18 at 6:52
Kevin Workman
33.8k54069
edited Nov 22 '18 at 6:52
Kevin Workman
33.8k54069
33.8k54069
asked Nov 22 '18 at 4:42
Labib HussainLabib Hussain
82
asked Nov 22 '18 at 4:42
Labib HussainLabib Hussain
82
asked Nov 22 '18 at 4:42
Labib HussainLabib Hussain
82
82
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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 '18 at 5:18
Unsolved CypherUnsolved Cypher
495314
add a comment |
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 '18 at 6:51
Kevin WorkmanKevin Workman
33.8k54069
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 5:18
Unsolved CypherUnsolved Cypher
495314
add a comment |
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 '18 at 5:18
Unsolved CypherUnsolved Cypher
495314
add a comment |
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 '18 at 5:18
Unsolved CypherUnsolved Cypher
495314
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 '18 at 5:18
Unsolved CypherUnsolved Cypher
495314
answered Nov 22 '18 at 5:18
Unsolved CypherUnsolved Cypher
495314
answered Nov 22 '18 at 5:18
Unsolved CypherUnsolved Cypher
495314
answered Nov 22 '18 at 5:18
Unsolved CypherUnsolved Cypher
495314
495314
add a comment |
add a comment |
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 '18 at 6:51
Kevin WorkmanKevin Workman
33.8k54069
add a comment |
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 '18 at 6:51
Kevin WorkmanKevin Workman
33.8k54069
add a comment |
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 '18 at 6:51
Kevin WorkmanKevin Workman
33.8k54069
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 '18 at 6:51
Kevin WorkmanKevin Workman
33.8k54069
answered Nov 22 '18 at 6:51
Kevin WorkmanKevin Workman
33.8k54069
answered Nov 22 '18 at 6:51
Kevin WorkmanKevin Workman
33.8k54069
answered Nov 22 '18 at 6:51
Kevin WorkmanKevin Workman
33.8k54069
33.8k54069
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.
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
