2

我正在使用 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; ?>">

只要来自hrefattr 的图像加载到#contentdiv 中，并且来自idattr 的散列作为散列添加到 url 和页面标题，这就是有效的，但我缺乏任何机制来组合 click 和 hashchange 函数，这样每个哈希实际上对应于图像。

4

1 回答 1

2

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

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";

    }

}
于 2011-11-23T19:45:07.093 回答