CORS issue with HTML5 canvas, javascript - javascript

I have 2 HTML5 widgets, both made with Phaser.js and having images and audio, which are loaded on the fly by phaser library.
One of the widget(HTML5 file) works on local file system without XAMPP, while another only work when serve through XAMPP server.
I want to know why some HTML5 canvas files works without server while most of the time we require some server for canvas files.
Its a great confusion for me.
Plz help.

There's a very good explanation of why you need a web server on the getting started page for Phaser.
What it boils down to is you need to use a web server because:
It's to do with the protocol used to access the files. When you
request anything over the web you're using http, and the server level
security is enough to ensure you can only access files you're meant
to. But when you drag a file in it's loaded via the local file system
(technically file://) and that is massively restricted, for obvious
reasons. Under file:// there's no concept of domains, no server level
security, just a raw file system.
...
Your game is going to need to load resources: images, audio files,
JSON data, maybe other JavaScript files. And in order to do this it
needs to run unhindered by the browser security shackles. It needs
http:// access to the game files. And for that we need a web server.
Technically, none of your Phaser applications should run without a web server, it's quite odd that you got one of them to.

Set game.load.crossOrigin = true in your preload code and it should work.

Related

Make a game written in Javascript available online

I've just finished a simple game in Adobe Animate using the HTML5 Canvas. I now have .fla, .html and .js files. Can I now put these somewhere on my website to make the game available to play? If so, where? If not, what else do I need? Thanks.
Clicking on the HTML file opens it in a browser, but I can't interact with it.
Thanks.
You're stepping in to a whole new world of hosting and deployments. To have a functioning website you need:
A host server
A domain name
Web files (which you have)
The host server will serve up your web files and allow incoming traffic from the web.
The domain name is optional, but helps with visibility. Without it you'll have to connect directly to the IP address of the host server.
I'd recommend finding a host like HostGator, GoDaddy, or Amazon S3 if you want to host a static website. It can be pretty intimidating at first, but you'll need to put in the time reading documentation to fully understand the process.
Alternatively, if you just want to get it running locally and not on the internet you can install a simple http server on your machine. I use NodeJS so I'll test with http-server alot. Hope this helps!

What is the best way to serve large javascript file libraries from a server with a slow upstream?

I want to put a webserver on my raspberry pi, but its upload speed is slow and I have a webpage with a big script (angular.js).
I could use a CDN for angular.js, but my ISP is not perfect, and I want to be able to serve the file even when the outside Internet is unavailable.
What is the best way to make the browser use one script when my network is connected to the rest of the Internet, but use another when the outside Internet is unavailable?
Save the contents of the file in Local Storage then use Javascript to insert the code for the file on to the web page.
Either that or use cache-control headers.

Is it possible to serve user created content offline in javascript?

My application serves user created bundles of HTML pages for e-learning, also known as SCORM packages, and i'm trying to make that as fast as possible.
Loading page-by-page in iframes is quite slow, as pages may include high resolution graphics, animations, audio, video and so on.
Unfortunately pre-loading these pages is quite difficult, as they usually react to onLoad() events to start animations and interactions.
Without using applets or extensions, would it be possible to download the user bundle and serve it "in-browser" to the application?
This is a common-enough task with the advent of fat clients built on Backbone.JS, Angular, Ember, etc. Clients request data (usually JSON), media, etc. from the server as opposed to pre-rendered HTML, and do rendering and resource management client-side. If you want to go this way so that you can support flexible offline mode the way you specified, you usually need a set of generic loaders and tools in your app cache manifest that will loading the more specific (user-specific, lesson-specific, etc.) resources on page load.
The first time your user opens your app, it should be in online mode, and your app will need to request the specific resources it needs to work well offline and store them in client-side storage (localStorage, indexedDB or what it's trying to replace - WebSQL, and fileSystem. There are many resources on the web on how to use each of these APIs.). This step can also be incremental, rather than a huge download of megabytes of data.
The next time your user opens your page, your app can attempt to load all the resources it needs from client-side storage before even calling the server. It will only need to call the server if it's missing some resources, or if it needs to get a fresher version of a resource, or of course if you need to write to the server. If you did a good job of loading all the resources it needed into client-side storage the first time, it can work decently in offline mode.
If your users are running modern browsers you could use the HTML5 cache manifest.
Creating a manifest file will get the browser to download and store the site locally and then the user may even visit it offline
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5

how get list of files in a folder using javascript

I am working on project for desktop application. I am using Qt controls with visual c++.
I am loading an html file in the QWebView as,
m_pWebView->load(QUrl("../../../demo/index_Splash_Screen.html"));
Now, what i want is, say, I have some .zip files in my location "c:\demo", I want list (or array of file names) of the files present in that directory.
How can i do this through javascript ?
PS: I went through this link, but it didnt match my requirement. I have not worked with of html, javascript and jquery. Please help me.
I'm afraid you cannot access local files or directories using javascript due to security issues.
Edit: I hadn't thought about the file api so thought for a moment this might not be true, but without some user input to give permission, this still cannot be done.
This question has a good response from PhilNicholas:
I'm afraid I may be the bearer of bad news for your design: The action
you are requesting expressly violates the security model as specified
in the File API spec. The client implementation of FileReader() must
make sure that "all files that are being read by FileReader objects
have first been selected by the user." (W3C File API , 13. Security
Considerations: http://www.w3.org/TR/FileAPI/#security-discussion).
It would be a huge security risk of browser scripts could just
arbitrarily open and read any file from a path without any user
interaction. No browser manufacturer would allow unfettered access to
the entire file system like that.
Thinking about it however, if it is all being run locally, you could use ajax to query a server side script that could return the directory you request.
If it is a Windows application then you could access the local filesystem by using ActiveX objects. You might have a look at this link Reading a txt file from Javascript
Note that activeX usage is possible only when using IE as browser/engine; I used to need it a while ago for developing an HTML application (.hta files).

Javascript: Listing File and Folder Structure

As I have read, it is not easy for JavaScript to modify files on client PC. I am working on a web based file manager and would need to know the following:
Can JavaScript list files and folder structure on a client PC?
Can JavaScript list files and folder structure on a server?
If your answer is no, that Java Scipt can not list files and folders say on client's or server's C:\ drive, than would CGI script be the only solution?
Browser JS reading client PC's files: Depends
For a security reason, you can't access the files on the user's PC without the user's consent.
That's why the FileReader API is created around the file input box <input type="file"> and a drag-n-drop area since the whole idea is to "access the file with user's consent". Without the user intentionally putting the file for access, you can't access it at all.
Server-side JS reading own server's files: Yes
As for server, if you meant access the server using server-JS (NodeJS or Rhino), yes you can (How else would it serve webpages anyway?).
Browser JS reading own server's files: Depends
Accessing the server from the browser using JS works if you have an API to read files from it.
Browser JS reading other server's files: Yes, with a catch
To access other server's files without some API, you could resort to creating a web scraper or a web-spider that runs server-side (since browser can't cross domains due to the same origin policy) and have an API exposed to your browser.
However:
you can't crawl to all files as some may be restricted from outside access.
the public appearance of the structure could be different from the internal structure, especially if the site uses segmented url scheme
sites using query strings to generate pages cannot be crawled easily due to the number of permutations it could make, thus some pages might be unreacheable.
CGI won't be a solution either, as it only has access to the filesystem of your server, not that of the client visiting your site. The only way to access your client's filesystem from javascript seems to be the File API, which apparently is not implemented by many browsers.
It's a cludge but you could resort to a java applet or the dreaded active-x control.

Categories