通過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股利和哈希從id attr被添加爲網址和頁面標題的哈希值，但我沒有任何機制來結合點擊和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"; 

    } 

}