無限滾動無法離線使用

Question

我正在嘗試從實際示例中學習jQuery，尤其是jScroll。 我發現這個網站對您來說可能看起來很愚蠢，但是它簡直太簡單了，因此這對我來說是jScroll工作的一個很好的例子。

當我嘗試將網頁（Ctrl + S或僅將頁面另存為）保存到計算機以供離線使用時，就會發生問題。 滾動不起作用。 這只是一個靜態頁面。 我已經在Chrome和Firefox中嘗試過。

你也會這樣嗎？ 如果可以的話，是否有一個簡單的解釋為什么它不起作用？

Answer 1

tl; dr通過來自http://endless.horse/ ajax請求動態添加馬的腿，這是一個跨域的http請求，因此出於瀏覽器安全性的原因而受到限制。 另外，您將需要運行服務器以允許ajax請求。

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

觸發滾動事件后，它會拉入http://endless.horse/legs.html並將其附加到html上，以不斷“增長”腿部。 它在本地不起作用有兩個原因：

1. 出於安全原因，不允許跨域HTTP請求。 https://developer.chrome.com/extensions/xhr
2. 您需要通過HTTP服務器運行html文件才能使ajax正常工作。 保存頁面並打開后，URL以類似於以下file:/// -這是因為您是直接打開文件，而不是通過Web服務器運行它。

如果您正在運行OSX或Linux，則可以使用python創建一個簡單的服務器。 1.打開終端2. cd /path/to/horse/project 3. python -m SimpleHTTPServer 5000 4.訪問http：// localhost：5000 /

在Windows上，下載XAMPP並按照說明進行操作。

代替使用“另存為”功能，在要提供服務的文件夾的根目錄下創建一個新的index.html 。 在http://endless.horse/上查看源代碼，將其復制/粘貼到新文件中。 “另存為”功能對保存的HTML文件進行了大量編輯。 您必須執行此操作，並確保index.html文件正確鏈接到jquery.jscroll.js和legs.html文件。