Question

我正在使用history.js plugin，想知道如何实现/类型的网址。现在我的代码是：

//Check if url hash value exists (for bookmark)
$.history.init(pageload);   

//highlight the selected link
$('a[href=' + document.location.hash + ']').addClass('selected');

//Seearch for link with REL set to ajax
$('a[rel=ajax]').click(function () {

    //grab the full url
    var hash = this.href;

    //remove the # value
    hash = hash.replace(/^.*#/, '');

    //for back button
    $.history.load(hash);   

    //clear the selected class and add the class class to the selected link
    $('a[rel=ajax]').removeClass('selected');
    $(this).addClass('selected');

    //hide the content and show the progress bar
    $('#content').hide();
    $('#loading').show();

    //run the ajax
    getPage();

    //cancel the anchor tag behaviour
    return false;
}); 



function pageload(hash) {
    //if hash value exists, run the ajax
    if (hash) getPage();    
}



function getPage() {

//generate the parameter for the php script
var data = 'page=' + document.location.hash.replace(/^.*#/, '');
$.ajax({
    url: "route.php",  
    type: "GET",        
    data: data,     
    cache: false,
    success: function (html) {  

        //hide the progress bar
        $('#loading').hide();   

        //add the content retrieved from ajax and put it in the #content div
        $('#content').html(html);

        //display the body with fadeIn transition
        $('#content').fadeIn('slow');       
    }       
});
}

网址始终为http://localhost/test/index.php#page1，但我想知道如何制作http://localhost/test/page1。

我不希望它显示index.php部分，我需要它就像上面的URL一样。

Answer 1

这只能使用HTML5和history.pushState()完成。

该API允许您更改显示的URL（只要它在同一个域中），而不会触发页面加载。然后，您可以使用AJAX来更改显示的内容。

要查看它的实际效果，请浏览github.com上的任何源代码树 - 他们使用该技术在浏览文件时“滑入”源代码。

Answer 2

但网址始终是http://localhost/test/index.php#page1，但我想知道怎么做http://localhost/test/page1

那不是你想要的。更改window.location将导致文档重新加载。

这就是为什么你要使用哈希来存储应用程序状态。

如何在history.js中使用正斜杠而不是哈希（＃）？

2 个答案: