根据不在哈希中的文件名通过 hashchange + jquery 加载内容

Question

我正在使用 jquery + ben alman 的 hashchange 插件。以下是获取哈希名称并加载内容的标准方法

$(window).hashchange(function() {
var hash = location.hash;
var array_url = hash.split('#');
var page = $(array_url).last()[0];
$('#content').load( page + '.php', function(){
});
});

但是有没有办法通过抓取分配给点击函数或通过 php 排序的其他变量来做到这一点？

我正在与一个多艺术家作品集网站合作，该网站向图像分发唯一的三四字母代码

我想通过独特的网址提供这些图片。出于多种原因，这必须通过 ajax。

我在添加其他 ajax 历史记录选项时遇到了困难，因为此页面已经使用 ajax 分页（加载此内容）和许多 htaccess url modrewrites。

我认为这可能是不可能的。

这是我当前的代码

$('a.photo').click(function () {
    var url = $(this).attr('href'),
    image = new Image();
    image.src = url;
    var clickedLink = $(this).attr('id');
    location.hash = clickedLink;
    image.onload = function () {
         $('#content').empty().append(image);
    };
    image.onerror = function () {
       $('#content').empty().html('That image is not available.');
    }
    $('#content').empty().html('Loading...');
    return false;
});

$(window).hashchange( function(){
    var hash = location.hash;
    var url = ( hash.replace( /^#/, '' ) || 'blank' );
    document.title = url;
})

$(window).hashchange();

还有我的html/php：

$thethumb = customuniqueidfunc();

<a href="[IMG URL]" 
class="photo gotdesc nohover" rel="<?php echo $row['description'] ?>" 
id="<?php echo $thethumb; ?>">

只要来自href attr 的图像加载到#content div 并且来自id attr 的散列作为散列添加到 url 和页面标题，这就是有效的，但我是缺少任何机制来组合 click 和 hashchange 函数，以便每个哈希实际上对应于图像。

Answer 1

我之前为此使用过的一种方法是运行哈希轮询函数。您可以在此页面上看到它的实际效果：

http://www.webskethio.com/#services

这是该页面的 javascript：

http://www.webskethio.com/ws.js

相关代码：

function pollHash() {

    //exit function if hash hasn't changed since last check
    if (window.location.hash==recentHash) {
        return; 
    }
    //hash has changed, update recentHash for future checks 
    recentHash = window.location.hash;

    //run AJAX to update page using page identfier from hash 
    initializeFromUrl(recentHash.substr(1));

}

$(document).ready(function(){

    /* code removed for readability */ 

    setInterval('pollHash()',100); // Important piece

    /* code removed for readability */


});

和

//AJAX function to update page if hash changes
function initializeFromUrl(fromLink) {

    /* code removed for readability */


    //take hash from function call or from the URL if not
    input = fromLink || window.location.hash ;

    //remove # from hash
    output = input.replace("#","");



    //get the URL of the AJAX content for new page
    pageId = output;






var url = $(this).attr('href'),
image = new Image();
image.src = url;
var clickedLink = $(this).attr('id');
location.hash = clickedLink;
image.onload = function () {
     $('#content').empty().append(image);
};
image.onerror = function () {
   $('#content').empty().html('That image is not available.');
}
$('#content').empty().html('Loading...');       




}

[编辑：] 如果您可以创建一个仅从数据库中输出图像位置的页面，那么这是您的页面的完整代码。

var recentHash = "";
var image_url ="";

$(document).ready(function() {

    $('a.photo').click(function (event) {
        var clickedLink = $(this).attr('id');
        location.hash = clickedLink;

        event.preventDefault();
    });


    setInterval('pollHash()',100);

});

function pollHash() {

    //exit function if hash hasn't changed since last check
    if (window.location.hash==recentHash) {
        return; 
    }
    //hash has changed, update recentHash for future checks 
    recentHash = window.location.hash;

    //run AJAX to update page using page identfier from hash 
    initializeFromUrl(recentHash.substr(1));

}


//AJAX function to update page if hash changes
function initializeFromUrl(fromLink) {

    /* code removed for readability */


    //take hash from function call or from the URL if not
    input = fromLink || window.location.hash ;

    //remove # from hash
    output = input.replace("#","");



    //get the URL of the AJAX content for new page
    pageId = output;
    if(pageId != ""){
        var temp_url = 'http://whitecu.be/user/mountain/'+pageId+'.html';
        $.get(temp_url, function(data) {

            image_url = data;
            image = new Image();
            image.src = image_url;

            image.onload = function () {
                $('#content').empty().append(image);
            };
            image.onerror = function () {
                $('#content').empty().html('That image is not available.');
            }
            $('#content').empty().html('Loading...');       

        });



    }else{

        window.location = "http://whitecu.be/user/mountain";

    }

}