0

我正在尝试从真实示例中学习 jQuery，尤其是 jScroll。我发现这个网站对你来说可能看起来很傻，但它非常简单，所以它对我来说是 jScroll 工作的一个很好的例子。

当我尝试将网页（Ctrl+S 或将页面另存为）保存到我的计算机以供离线使用时，就会出现问题。滚动不起作用。这只是一个静态页面。我在 Chrome 和 Firefox 中都试过了。

这也发生在你身上吗？如果确实如此，是否可以简单地解释为什么它不起作用？

4

1 回答 1

1

tl;dr 马的腿是通过 ajax 请求动态添加的，http://endless.horse/这是一个跨域 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:///- 那是因为您直接打开文件而不是通过网络服务器运行它。

如果您正在运行 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文件。

于 2016-08-16T10:50:52.670 回答