Как вы можете проверить #hash в URL, используя JavaScript?
У меня есть некоторый JavaScript-код jQuery, который я хочу запускать только тогда, когда в URL есть хеш-ссылка (#). Как вы можете проверить этот символ с помощью JavaScript? Мне нужен простой всеобъемлющий тест, который бы обнаруживал URL-адреса, подобные этим:
- example.com/page.html#anchor
- example.com/page.html#anotheranchor
В основном что-то вроде:
if (thereIsAHashInTheUrl) {
do this;
} else {
do this;
}
Если бы кто-нибудь мог указать мне правильное направление, это было бы очень ценно.
20 ответов
Просто:
if(window.location.hash) {
// Fragment exists
} else {
// Fragment doesn't exist
}
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!
});
Это решит проблему;)
Вы можете анализировать URL-адреса с помощью современного JS:
var my_url = new URL('http://www.google.sk/foo?boo=123#baz');
my_url.hash; // outputs "#baz"
my_url.pathname; // outputs "/moo"
my_url.protocol; // "http:"
my_url.search; // outputs "?doo=123"
URL-адреса без хеша вернут пустую строку.
Вот что вы можете сделать, чтобы периодически проверять изменение хеша, а затем вызывать функцию для обработки значения хеша.
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 в document.location. Это здорово, если вас интересует только текущая страница. Но вопрос был в том, чтобы иметь возможность разбирать якоря на странице, а не на самой странице.
Большинство людей, похоже, упускают из виду то, что те же свойства 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
}
});
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;
}
}
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);
Добавим это сюда как метод для абстрагирования свойств местоположения от произвольных URI-подобных строк. Хотя window.location instanceof Location верно, любая попытка вызвать Location скажу вам, что это нелегальный конструктор. Вы все еще можете добраться до таких вещей, как hash, query, protocol и т.д., установив вашу строку в качестве href свойство якорного элемента DOM, который будет совместно использовать все свойства адреса с window.location,
Самый простой способ сделать это:
var a = document.createElement('a');
a.href = string;
string.hash;
Для удобства я написал небольшую библиотеку, которая использует это вместо родного Location конструктор с тем, который будет принимать строки и производить window.location-подобные объекты: Location.js
Замечания Партриджа и Гарета выше. Они заслуживают отдельного ответа. По-видимому, свойства хеша и поиска доступны для любого html-объекта Link:
<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
}
(но это может быть немного перестарался..)
Это простой способ проверить это для URL текущей страницы:
function checkHash(){
return (location.hash ? true : false);
}
Обычно щелчки идут в первую очередь, чем изменения местоположения, поэтому после щелчка рекомендуется установить значение TimeOut для получения обновленного window.location.hash
$(".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.
Я заметил, что все эти ответы в основном проверяют window.location.hash и затрудняют написание тестов.
const hasHash = string => string.includes('#')
Вы также можете удалить хеш из URL-адреса следующим образом:
const removeHash = string => {
const [url] = string.split('#')
return url
}
И, наконец, вы можете объединить логику вместе:
if(hasHash(url)) {
url = removeHash(url)
}
Иногда вы получаете полную строку запроса, такую как "#anchorlink?firstname=mark"
это мой скрипт для получения хеш-значения:
var hashId = window.location.hash;
hashId = hashId.match(/#[^?&\/]*/g);
returns -> #anchorlink