javascript - AJAX 单页爬取

Question

尽管在谷歌指南上，我真的对这个问题感到困惑。 所以，我有一个网页(html 和 js)，它将一些信息上传到

<div id=""></div>

使用 jquery 的

.load(target)

通过js函数和html文档中的onclick事件实现上传。

所以，当我点击页面区域时，js开始向 block 上传信息。

根据 google 指南，如果我希望该页面被抓取，我应该使用 hash-bang。

问题:
1.考虑到我只有一页，我该如何实现？
2.我怎样才能访问“#!”通过脚本上传的页面？
3.如何创建html快照？

谢谢。

Answer 1

关于您的问题: 假设您有一个名为 MyPage.html 的页面，其中包含 3 个元素，您将 java 脚本附加到这些元素，id 为:A、B、C。它们中的每一个都会导致不同的内容加载到您的 div 中。 1) 最简单的方法是创建如下链接:

<a id='A' href='#GoToA' onclick='javascript:executeYourCodeA();'>Load A</a>
<a id='B' href='#GoToB' onclick='javascript:executeYourCodeB();'>Load B</a>
<a id='C' href='#GotoC' onclick='javascript:executeYourCodeC();'>Load C</a>

当用户点击链接时，'#GoToA' 或其他将自动添加到浏览器页面地址。所以页面地址看起来像

www.yourdomain.com/MyPage.html#GotoA

浏览器会在其历史记录中记住此地址更改。

2) 如果你想阅读 url 使用

var mylocation = window.location

- 来源:http://www.w3schools.com/js/js_window_location.asp

3) 如果用户只访问 MyPage.html 一切正常，页面以其原始状态呈现，但是如果用户希望在单击链接 A 后看到内容可见怎么办？ 您可以区分页面加载、读取页面 url(参见 2))和自动加载内容。它可以通过以下方式实现:

  $(function (){
                 var  myurl = window.location;
                 var target = myurl.split('#')[1];
                 switch(target){
                       case 'GoToA' : executeYourCodeA(); break;
                       case 'GotoB' : executeYourCodeB(); break;
                       .
                       .
                       default: /*show the original, initial page*/
                       break;
                });

实际上，现在加载地址 MyPage.html 和单击链接 A 与访问页面 MyPage.html#GoToA 所显示的内容相同

因此，通过这种方式，您可以拥有指向具有不同动态加载内容的同一站点的单独链接。

Cristian Varga 告诉您的事情可用于实现后退和前进功能:基本上您所做的是创建一个普通链接，指向像 MySecondPage.html 这样的页面(这个页面实际上并不存在)。然后，您在点击事件中将内容加载到您的 div，强制停止执行标准链接行为(通过 preventDefault() - 这会导致您的事件不再被处理 - 因此浏览器“忽略”到 MySecondPage.html 的导航。然后您手动告诉浏览器存储历史记录并告诉它你现在在 MySecondPage.html

history.pushState(null, null, link.href);  

因此您加载内容、阻止导航并手动说服浏览器页面已更改并将状态存储在浏览器历史记录中。

但现在实现快照功能 - 在我看来会更棘手，因为 MySecondPage.html 是一个完全有效但不存在的 url，当用户键入 www.mydomain.com/MySecondPage.html 时加载 MyPage.html并显示 MySecondPage 内容需要服务器端操作。 - 来源 http://diveintohtml5.info/history.html