Как узнать, какая кнопка перенаправлена ​​на страницу - PullRequest
0 голосов
/ 28 марта 2020

У меня есть следующий код:

<!DOCTYPE html>
<html>
<head>
    <title>Exmaple</title>
</head>
<body>
    <h2>Example Send<h2>
    <hr>
    <button onclick="location.href = 'main.html';">Button1</button>
    <hr>
    <button onclick="location.href = 'main.html';">Button2</button>
    <hr>
    <button onclick="location.href = 'main.html';">Button3</button>
</body>
</html>

Все кнопки перенаправляют на одну и ту же страницу. На перенаправленной странице (main. html) мне нужно знать, какой номер кнопки был нажат, а затем показывать информацию о нем (в этом примере изменение содержания h1). Основной код. html выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
    <title>Receiver</title>
</head>
<body>
    <h1>Button number <span id="data"> 'The number of button should go here'</span> was clicked<h1>
</body>
</html>

Реальное приложение будет выполнено на странице, где разные устройства представлены в виде карточек, когда нажата кнопка «Информация» одной нужной мне карточки. чтобы перенаправить на страницу панели мониторинга, которая получит адрес ma c, соответствующий выбранному устройству, и отобразит информацию базы данных с этого устройства в некоторых диаграммах.

Я думаю, что я должен использовать javascript для этого, но я застрял в том, как я могу общаться между двумя сценариями, выполняемыми разными html. спасибо.

1 Ответ

0 голосов
/ 28 марта 2020

Обновите свое местоположение перенаправления и добавьте уникальный поисковый запрос для каждой кнопки.

<button onclick="location.href = 'main.html?btn=button1';">Button1</button>
<hr>
<button onclick="location.href = 'main.html?btn=button2';">Button2</button>
<hr>
<button onclick="location.href = 'main.html?btn=button3';">Button3</button>

И main.html напишите скрипт и прочитайте значение строки запроса, используя URLSearchParams

const urlParams = new URLSearchParams(window.location.search);
const btnValue = urlParams.get('btn');

Примечание: URLSearchParams не поддерживает IE.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...