我正在使用 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 和页面标题的哈希,但我缺乏任何机制来结合点击和 hashchange 函数,以便每个哈希实际上对应于图像。
最佳答案
我之前使用过的一种方法是运行哈希轮询函数。您可以在此页面上查看它的运行情况:
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";
}
}
关于php - 根据不在哈希中的文件名通过 hashchange + jquery 加载内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8238323/