单页AJAX爬行

AJAX crawling on single page

本文关键字：爬行 AJAX 单页      更新时间：2023-09-26

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

<div id=""></div>
使用jquery的

.load(target)

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

所以，当我点击页面区域js开始上传信息到块。

根据谷歌指南，如果我想让页面被抓取，我应该使用hashbang。

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

谢谢。

关于您的问题:假设您有一个名为myppage .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;
                });

实际上，现在的情况是加载地址myppage。html和点击链接A的方式是一样的通过显示访问页面myppage。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时加载myppage .html并显示MySecondPage内容将需要服务器端操作。-来源http://diveintohtml5.info/history.html

相关文章：