Как вы можете проверить #hash в URL-адресе с помощью JavaScript?
У меня есть код jQuery JavaScript, который я хочу запустить только тогда, когда в URL есть привязка хэша ( # ). Как вы можете проверить этот символ с помощью JavaScript? Мне нужен простой тест catch-all, который будет обнаруживать такие URL-адреса:
- example.com/page.html#anchor
- example.com/page.html#anotheranchor
в основном что-то вроде:
if (thereIsAHashInTheUrl) {
do this;
} else {
do this;
}
Если бы кто-нибудь мог указать мне в правильном направлении, это было бы значительно ценится.
18 ответов
if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
alert (hash);
// hash found
} else {
// No hash found
}
пишем следующее:
<script type="text/javascript">
if (location.href.indexOf("#") != -1) {
// Your code in here accessing the string like this
// location.href.substr(location.href.indexOf("#"))
}
</script>
Если URI не является местоположением документа, этот фрагмент будет делать то, что вы хотите.
var url = 'example.com/page.html#anchor',
hash = url.split('#')[1];
if (hash) {
alert(hash)
} else {
// do something else
}
вы пробовали это?
if (url.indexOf("#") != -1)
{
}
(где url
это URL, который вы хотите проверить, очевидно.)
$('#myanchor').click(function(){
window.location.hash = "myanchor"; //set hash
return false; //disables browser anchor jump behavior
});
$(window).bind('hashchange', function () { //detect hash change
var hash = window.location.hash.slice(1); //hash to string (= "myanchor")
//do sth here, hell yeah!
});
Это решит проблему ;)
вот что вы можете сделать, чтобы периодически проверять изменение хэша, а затем вызывать функцию для обработки хэш-значения.
var hash = false;
checkHash();
function checkHash(){
if(window.location.hash != hash) {
hash = window.location.hash;
processHash(hash);
} t=setTimeout("checkHash()",400);
}
function processHash(hash){
alert(hash);
}
большинство людей знают о свойствах URL в документе.местоположение. Это здорово, если вас интересует только текущая страница. Но вопрос был в том, чтобы разбирать якоря на странице, а не на самой странице.
большинство людей, похоже, упускают, что те же свойства URL также доступны для привязки элементов:
// To process anchors on click
jQuery('a').click(function () {
if (this.hash) {
// Clicked anchor has a hash
} else {
// Clicked anchor does not have a hash
}
});
// To process anchors without waiting for an event
jQuery('a').each(function () {
if (this.hash) {
// Current anchor has a hash
} else {
// Current anchor does not have a hash
}
});
куропатка и комментарии Gareths выше велики. Они заслуживают отдельного ответа. По-видимому, свойства хэша и поиска доступны на любом объекте ссылки html:
<a id="test" href="foo.html?bar#quz">test</a>
<script type="text/javascript">
alert(document.getElementById('test').search); //bar
alert(document.getElementById('test').hash); //quz
</script>
или
<a href="bar.html?foo" onclick="alert(this.search)">SAY FOO</a>
Если вам это нужно на регулярной строковой переменной и, случается, есть jQuery вокруг, это должно сработать:
var mylink = "foo.html?bar#quz";
if ($('<a href="'+mylink+'">').get(0).search=='bar')) {
// do stuff
}
(но, может быть, немного перестарался .. )
бросая это здесь как метод для абстрагирования свойств местоположения из произвольных URI-подобных строк. Хотя window.location instanceof Location
истинно, любая попытка вызвать Location
скажет вам, что это незаконный конструктор. Вы все еще можете добраться до таких вещей, как hash
, query
, protocol
etc, установив строку как href
свойство элемента привязки DOM, который затем будет делиться всеми свойствами адреса с window.location
.
простой способ сделать это есть:
var a = document.createElement('a');
a.href = string;
string.hash;
для удобства я написал небольшую библиотеку, которая использует это, чтобы заменить родной Location
конструктор с одним, который будет принимать строки и производить window.location
объекты: расположение.js
function getHash() {
if (window.location.hash) {
var hash = window.location.hash.substring(1);
if (hash.length === 0) {
return false;
} else {
return hash;
}
} else {
return false;
}
}
обычно клики идут первыми, чем изменения местоположения, поэтому после щелчка-хорошая идея для setTimeOut чтобы получить обновленное окно.местоположение.хэш
$(".nav").click(function(){
setTimeout(function(){
updatedHash = location.hash
},100);
});
или вы можете слушать расположением:
window.onhashchange = function(evt){
updatedHash = "#" + evt.newURL.split("#")[1]
};
Я написал плагин jQuery что делает что-то вроде что ты хочешь сделать.
это простой якорный маршрутизатор.
вот простая функция, которая возвращает true
или false
(имеет / не имеет хэштегом):
var urlToCheck = 'http://www.domain.com/#hashtag';
function hasHashtag(url) {
return (url.indexOf("#") != -1) ? true : false;
}
// Condition
if(hasHashtag(urlToCheck)) {
// Do something if has
}
else {
// Do something if doesn't
}
возвращает true
в этом случае.
на основе комментария @jon-skeet.
Это простой способ проверить это для текущей страницы URL:
function checkHash(){
return (location.hash ? true : false);
}
иногда вы получаете полную строку запроса, такую как " #anchorlink?имя=Марк"
Это мой скрипт для получения хэш-значения:
var hashId = window.location.hash;
hashId = hashId.match(/#[^?&\/]*/g);
returns -> #anchorlink