Question

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

<div id=""></div>

使用jquery＆＃39;

.load(target)

使用js函数实现上传和＆＃34; onclick＆＃34; html文档中的事件。

因此，当我点击页面区域时，js开始将信息上传到块。

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

问题：
1.考虑到我只有一页，我怎么能实现呢？ 2.如何访问＆＃34;＃！＆＃34;按脚本上传的页面？
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）如果你想阅读网址

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。然后你手动告诉浏览器存储历史记录stete并告诉它你现在是omSecondPage.html

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

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

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

AJAX在单页面上抓取

1 个答案: