У меня вопрос, и мне интересно, возможно ли это. Я хочу динамически добавлять контент на html-страницу, изменяя идентификатор в URL-адресе.

Я имею в виду, например, я хочу добавить имя человека на веб-страницу:

Сначала моя страница была бы: www.mypage.com/index

<p> Hello <span></span> welcome to our page</p> 

Результат, который я хочу получить, - написать этот URL: www.mypage.com/index#YourName код обновляется следующим образом:

<p> Hello <span id="YourName">YourName</span> welcome to our page</p> 

Таким образом, идентификатор и содержимое диапазона обновляются за счет изменения URL-адреса. Я действительно не знаю, как этого добиться. Интересно, могу ли я динамически присвоить своему диапазону идентификатор, набрав его на URL-адресе, а затем получить этот идентификатор и использовать его как значение диапазона.

0
mscmdaddcts 17 Янв 2021 в 01:02

3 ответа

Лучший ответ

Вы можете получить значение идентификатора из URL-адреса, используя window.location.hash.

Кроме того, вы можете наблюдать за этими изменениями, используя событие окна hashchange.

function showHash() {
  const newHash = window.location.hash.replace("#", "");
  const resultSpan = document.querySelector(".hash-value");
  
  resultSpan.id = newHash;
  resultSpan.innerHTML = newHash;
}

window.addEventListener("hashchange", showHash, false);
window.addEventListener("DOMContentLoaded", showHash);
<body>

  <div>Current HASH in URL is: <span class="hash-value"></span></div>

  <div class="buttons">
    <a href="#hash1">hash1</a>
    <a href="#hash2">hash2</a>
    <a href="#hash3">hash3</a>
  </div>
</body>
1
Alexandru Bulat 16 Янв 2021 в 23:55

Вы можете использовать JavaScript для получения текущей ссылки, например:

<script>
   let YourLink = window.location.href;
   let startingPoint = YourLink.indexOf('#');
   let endingPoint = YourLink.indexOf('/'); // In case if the name is not the last thing on your link
   let NameYouWant = YourLink.substring(startingPoint, endingPoint);

   // So 'NameYouWant' would be the name you need to use
</script>

Если вы используете знак «#» в качестве отправной точки каждого имени в вашей ссылке, надеюсь, это будет полезно.

0
hayate 16 Янв 2021 в 22:31

Может ты можешь попробовать это

let splits = window.location.href.split("#");
let span = document.getElementsByTagName("p")[0].getElementsByTagName("span")[0];
span.innerText = splits[splits.length - 1];
span.id = splits[splits.length - 1];
0
dm_tr 16 Янв 2021 в 22:49
65755199