Question

我想开发一个完全ajax导航的网站，但这意味着用户无法共享，收藏或直接访问某些内容。

我注意到一些网站（Gmail，Thesixtyone，Youtube）正在使用哈希标记为不同的网页配置创建自定义网址。这个技术被称为什么，我该如何实现呢？

Answer 1

我已经使用hash bang方法来完成一个带有SEO的完全ajax驱动的应用程序。根据我的经验，我会说它对于网络浏览器和智能手机浏览器都是非常可靠的方法。

这是我的方法。为简化代码，我将使用Jquery / Zepto代码

当您需要加载不同的ajax页面时，只需使用javascript更改URL哈希。

window.location.hash = '#!page1';

然后将从javascript中触发哈希更改事件

$(window).on('hashchange',loadPage);

使用loadPage函数处理该事件

var loadPage = function(e){
    pageId = window.location.hash;

    _gaq.push(['_trackPageview', '/'+pageId]); //For google analytics virtual page push

    if(pageId == '#!page1'){
        $.get('ajax/page1.php', function(response) {
           $('#main').html(response);
        });
    }else if(pageId == '#!page2'){
        $.get('ajax/page2.php', function(response) {
           $('#main').html(response);
        });
    }
}

通过这种方式，您可以通过键入URL并使用链接来加载页面。

现在的SEO部分。谷歌和其他主要搜索引擎已经开发出一种抓取基于ajax的网站的方法。如果你使用＃！在你的网址谷歌将取代＃！部分带有'？_escaped_fragment_'并会询问您的内容。例如

www.yoursite.com /＃！page1将转换为www.yoursite.com /？_ escaped_fragment_ = page1

您需要做的就是将_escaped_fragment_作为GET参数捕获。如果你使用php，代码就像

if (isset($_GET['_escaped_fragment_'])) {           
    $fragment = $_GET['_escaped_fragment_'];

    if($fragment == 'page1')
        echo include 'ajax/page1.php'; // or use readfile method
    else if($fragment == 'page2')
        echo include 'ajax/page2.php'; // or use readfile method
}

您还可以通过捕获_escaped_fragment _

分别为每个页面设置html页面标题和说明

另外，您可以使用＃在社交媒体上分享网址！同样。它将在_escaped_fragment _

的帮助下解析为常规链接

我希望这种方法可以帮助您解决所有问题。

Answer 2

很快进入JQuery地址。 http://www.asual.com/jquery/address/

这正是你所说的。但是，既然你问自定义网址中的＃意味着什么，我认为你是相当新的。 JQuery地址起初看起来很吓人，但它真的很容易。您也应该使用JQuery进行所有ajax处理。

#是一个锚标记。如果你这样做<a name="list">This is an anchor tag</a>然后将#list添加到网址，页面将跳转到名称= list的标签。

Answer 3

如果您有ajax更新的div内容，以下是使用jquery地址库http://www.asual.com/jquery/address/的示例。

<body>               
    <div id="content">
        Your ajax content...
    </div>
</body>

包括jquery地址库，然后

$(document).ready(function () {   

        $('a').address();

        $.address.externalChange(function (e) {
            if (e.value != '/') {
                $('#content').load(e.value);
            }
        });
 });

如果要排除某些历史导航的href

$('a[href!="#"]').address();

基于AJAX的网站中的URL导航？

3 个答案: