Знать, какая ссылка направила меня на страницу

#javascript #html #hyperlink

#javascript #HTML #гиперссылка

Вопрос:

Я хочу создать веб-страницу с динамическим заголовком, который изменяется в зависимости от ссылки, на которую я нажал на другой странице.
Допустим, у меня есть страница с двумя ссылками

 <a href="somePage.html">link 1</a>
<a href="somePage.html">link 2</a>
  

и в «somePage.html » У меня есть заголовок, который я хочу изменить в соответствии со ссылкой, по которой я нажал (ссылка 1 или ссылка 2).

 <h2>you were directed from [here I should insert link 1 or link 2] </h2> 
  

Я могу использовать только html, css и JS, и логика должна быть на интерфейсе.

Любой способ сделать это?

Ответ №1:

Может быть, вы можете добавить параметр запроса к каждой ссылке:

 <a href="somePage.html?page=link 1">link 1</a>
<a href="somePage.html?page=link 2">link 2</a>

<div id='redirected-from'></div>

<script>
    const urlParams = new URLSearchParams(window.location.search);
    let text = urlParams.get('page');
    // escape amp;, <, >, " and '
    linkText = text.replace(/amp;/g, "amp;amp;")
     .replace(/</g, "amp;<")
     .replace(/>/g, "amp;>")
     .replace(/"/g, "amp;quot;")
     .replace(/'/g, "amp;#039;");

    document.getElementById("redirected-from").innerHTML = `<h2>You were directed from ${linkText}</h2>`
</script>
  

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

1. Никогда не вводите необработанный HTML из строки запроса на страницу. Это должно быть проверено на безопасность.

2. Не совсем. Вы можете получить эффект новой строки с неразрывными пробелами. У него просто нет хороших горизонтальных правил. imgur.com/a/Mgevvgk