Получить hash js
Подробно о получении и выводе якоря/решетки/hash-а
- Теория получения hash-а javascript.
- Пример получения hash-а javascript.
- Пример получения hash-а javascript 2.
- Пример получения hash-а javascript без решетки.
Теория получения hash-а javascript.
С помощью javascript можно получить и вывести "якорь/решетку/hash" на экран. Для этого вам понадобится:
Первое - естественно тег script.
Получить все содержимое адресной строки включая hash.
Передать полученную строку в объект URL.
И далее получить из созданного объекта ваш "hash".
И выведем на экран с помощью document.write();
Соберем весь код:
Код получения hash-а javascript при загрузке страницы.
Данный код "получения hash-а" будет срабатывать только при загрузке, перезагрузки страницы.
<script>
var urlObj = new URL(window.location.href);
document.write (urlObj . hash);
</script>
Пример работы Кода получения hash-а javascript.
Если при загрузке страницы "hash" не существовал, то вы ничего не увидите... здесь получается довольно скучно!
Иначе... вы увидите полученный "hash".
Пример получения hash-а javascript.
Если выше вы не получили и не увидели "hash" и... получилось довольно скучно!
Напишем пример, который изменит положение вещей!
Для этого вам понадобится:
Теория и код из выше приведенного пункта - изменим его, чтобы было чуть-чуть интереснее...
Составим условие по которому... в зависимости от того, если/нет "hash" в строке будем выводить разную информацию!
Соберем весь код:
Код с условием есть/нет hash javascript.
Html
<span id=text></span>
javascript
<script>
urlObj = new URL(window.location.href);
if(urlObj . hash)
{
document.write (urlObj . hash); example_hash.innerHTML = "<red>Теперь hash существует!</red>";
}
else document.write ("Вы ничего не увидите - потому, что hash не существует. <a href=https://dwweb.ru/poluchit_hash_js.html#example_hash target=_blank>нажмите здесь</a>");
</script>
Пример получения и вывода hash javascript
Разместим выше приведенный код прямо здесь:
Пример получения hash-а javascript 2.
Второй пример основан на предыдущем пункте... только чуть посложнее и без открытия страницы в новом окне.
Не буду описывать процесс получения и вывод построчно - придется писать отдельную страницу... протестируй стенд.
Ниже стенда сможешь скопировать код...
Тестовый стенд для тестирования получения и вывода решетки/якоря/hash-а
Сделал отдельную кнопку, которая позволит увидеть адресную строку с hash и далее получить и вывести его.
Код:
<a name="no_go"></a>
<h2>Стенд получения и вывода решетки/якоря/hash-а</h2>
<div class="kod" id="example"></div>
<button id="show_hash" class="width_100">Показать адресную строку с хешем/якорем/решеткой.</button>
<span id=is_hash></span>
<button id="get_hash" class="width_100">Получи hash из адресной строки.</button>
javascript
<script>
var urlObj;
show_hash.onclick = function()
{
urlObj = new URL(window.location.href);
if(urlObj . hash) { example.innerHTML = window.location.href; is_hash.innerHTML=""; }
else is_hash.innerHTML = "<blackblock><a href=\"#no_go\">hash - еще не существует! Нажми на меня!</a></blackblock>";
}
get_hash. onclick = function()
{
urlObj = new URL(window.location.href);
if(urlObj . hash)
{
example.innerHTML = urlObj . hash ;
}
else is_hash.innerHTML = "<blackblock><a href=\"#no_go\">hash - еще не существует! Нажми на меня!</a></blackblock>";
}
</script>
Css:
<style>
.blackblock{
background: black;
color: #fbff00;
font-size: 25px;
text-align: center;
display: block;
padding: 20px 0;
margin: 10px 0;
}
red {
color: red;
}
.width_100 {
width: 100%;
padding: 10px 0;
margin: 10px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
Пример получения hash-а javascript без решетки.
Для того, чтобы получить и вывести hash в javascript без решетки вам понадобится:
Код и тория предыдущего пункта и нужно заменить пару строк в коде!
В коде, где есть проверка существования hash - заменяем все содержание внутри условия:
+ вам понадобится удалить решетку с помощью slice.
if(urlObj . hash)
{
example.innerHTML = urlObj . hash . slice(1);
}
Тестовый стенд для тестирования hash-а без решетки
Аналогично получение и вывод hash-а, но только без решетки...