Блог

Главная - Вопросы по программированию - Добавление динамического содержимого с элементами URL

Добавление динамического содержимого с элементами URL

#javascript #url #dynamic

#javascript #url #динамический

Вопрос:

У меня есть вопрос, и мне интересно, возможно ли это. Я хочу динамически добавлять содержимое на 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-адреса. Я действительно не знаю, как этого добиться. Интересно, мог бы я динамически присвоить своему span идентификатор, введя его в URL-адресе, а затем получить этот идентификатор и использовать его в качестве значения span.

Комментарии:

1. Значение, когда URL-адрес www.mypage.com/index#HerName содержание будет таким <p> Hello <span id="HerName">HerName</span> welcome to our page</p> ?

2. Это именно то, чего я пытаюсь достичь.

3. Значит, диапазон id меняется с помощью хэштега?

4. Да! Интересно, возможно ли это?

5. Да, проверьте мой ответ ниже

Ответ №1:

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

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

 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. Спасибо за ваш ответ, но я думаю, что мне следует обновить свой вопрос.

2. Вы тестировали фрагмент локально?

3. prnt.sc/wxj992 Это то, чего вам нужно достичь?

Ответ №2:

Вы можете использовать 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>

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

Комментарии:

1. Спасибо за ваш ответ, но как я могу использовать это для обновления содержимого моего диапазона?

2. @mscmdaddcts вы присваиваете идентификатор своему диапазону следующим образом: <span id='mySpan'></span> а затем добавляете $('#mySpan')[0].innerHTML = NameYouWant; в свой скрипт, P.S извините за поздний ответ

Ответ №3:

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

 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];
Метки: