无限滚动无法离线使用

Question

I am trying to learn jQuery and particularly jScroll from real examples. I found this website that might look silly to you but it's dead simple so it's a great example of jScroll work for me.

The problem happens when I try to save the web page (Ctrl+S or just Save Page As) to my computer for offline use. The scrolling doesn't work. It's just a static page. I've tried it both in Chrome and Firefox.

Does this happen to you too? And if it does, is there an easy explanation of why it doesn't work?

Answer 1

tl;dr The horse's legs are dynamically added via ajax requests from http://endless.horse/ which is a cross-origin http request and is therefore restricted for browser security reasons. Also, you would need to be running a server to allow for ajax requests.

https://developer.chrome.com/extensions/xhr https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

When the scroll event is fired it pulls in http://endless.horse/legs.html and appends it to the html to continuously "grow" the legs. There are two reasons it doesn't work locally:

1. Cross-origin HTTP Requests are disallowed for security reasons. https://developer.chrome.com/extensions/xhr
2. You need to be running the html file through an HTTP server to have ajax working. After saving the page and opening it, the url begins with something like this file:/// - That's because you're opening the file directly and not running it through a web-server.

If you're running OSX or Linux you can create a simple server using python. 1. Open up your terminal 2. cd /path/to/horse/project 3. python -m SimpleHTTPServer 5000 4. visit http://localhost:5000/

On Windows, download XAMPP and follow instructions.

Instead of using the "Save As" feature, create a new index.html at the root of the folder being served. View source on http://endless.horse/ copy/paste that into your new file. The "Save As" feature does a lot of editing on the saved HTML file. You'll have to do this and make sure the index.html file links correctly to jquery.jscroll.js and the legs.html file.