得到AJAX哈希URL页面加载

所以说我设置的哈希当我做一个AJAX调用：得到AJAX哈希URL页面加载

例如：http://example.com/#hash.html

如果我加载其他页面，并单击后退按钮，我如何检测散列和提取网址加载？其余的我已经覆盖:)。

如果您需要更多代码，请告诉我。顺便说一句，我使用jQuery。

来源

2011-04-07 cmplieger

如果我想要一个插件，我会要求它:) – cmplieger 2011-04-07 02:03:13

有一个事件，hashchange，但它只支持Firefox 3.6，IE8和我承担最新的Chromes和Safaris。

为获得最佳支持，请检测hashchange事件，如果不存在，请使用轮询功能setInterval()。

所以，你会做这样的事情......

(function() { 

    var hash = window.location.hash; 

    if ('onhashchange' in window) { 
     window.onhashchange = hashChanged; 
    } else { 
     setInterval(function() { 
     if (window.location.hash != hash) { 
      hash = window.location.hash; 
      hashChanged(); 
     } 
     }, 500); 
    } 

    var hashChanged = function() { 
    alert('Hash has changed!'); 
    }; 

})();

来源

2011-04-07 01:36:48 alex

谢谢你，hashchange是完美的：D。我只瞄准safari，所以它工作正常：D – cmplieger 2011-04-07 02:02:22

http://caniuse.com/#feat=hashchange – 2016-02-01 15:03:56

$(function() { 
    var page = window.location.hash; 
    if (page == "") page = "somedefaultpage.html"; 
    $("#content").load(page); 
});

如果你已经连接好您的导航正确加载到您的内容元素的页面应该已经在那里，因为浏览器必须导航到那#hash

来源

2011-04-07 01:38:52 hunter

你有几个选项。

其中最明显的是

window.location.hash;

...这已经有些年头了实际的JavaScript的一部分（more information here或通过谷歌搜索“JavaScript位置哈希”）。

还有一个名为jQuery.Url的jQuery插件，它具有很多用于处理URL的好用功能。

来源

2011-04-07 01:40:21

不适用于后退按钮 – cmplieger 2011-04-07 01:49:43

使用window.location.hash在来回导航时加载适当的哈希内容集的简单示例。

希望这可以帮助某人......欢呼！

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    a{ 
     text-decoration: none; 
     color:#999; 
     font: arial; 
    } 
    .content{ 
     width: 50%; 
     height: 30px; 
     border:1px solid darkorange; 
     padding: 3%;color:#999; 
    } 
</style> 


<body> 
<div class="box"> 
<a id="hash1" href="">Add Hash1</a> 
<a id="hash2" href="">Add Hash2</a> 
</div> 
<div class="content"></div> 
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function() { 
    $(".box a").click(function(e) { 
     window.location.hash = $(this).attr("id"); 
     e.preventDefault(); 
    }); 
$(window).on('hashchange', function() { 
    if (location.hash === '#hash1') { 
    $("div.content").html('Hash one added!'); 
    } 
    if (location.hash === '#hash2') { 
    $("div.content").html('Hash two added!'); 
    } 
    if (location.hash === '') { 
    $("div.content").html(''); 
    } 
}); 
}); 
</script> 
</body> 
</html>

来源

2016-10-31 05:55:17 Toki

得到AJAX哈希URL页面加载

回答

相关问题