Отображение пользовательского ввода в HTML-тег из другого файла [HTML + JS] - PullRequest
Новая
       31

Отображение пользовательского ввода в HTML-тег из другого файла [HTML + JS]

0 голосов
/ 30 апреля 2018

Я как бы создаю электронное приложение с использованием HTML, JS и CSS - просто базовая вещь. У меня есть два файла HTML (скажем, FILE1.html и FILE2.html ).

В file1 пользователь предоставляет свою пару имя пользователя / пароль, которая затем переводит его в file2 .

То, что я хочу сделать, - это захватить ввод пользователя (особенно username) в file1 и отобразить его в file2 .

Теперь я могу сделать это в одном файле; вот мой код:

FILE1 

<body>
  <input type="text" id="username" /><br>   
    <button onclick="getUserName(); return false;">Continue</button>
  <h1 id="receivedUserName"></h1>
</body>

и файл JS: 

const getUserName = () => {
  let userName = document.getElementById('username').value;
  document.getElementById('receivedUserName').innerHTML = userName;
};

Все отлично работает внутри file1, но мне действительно нужно передать захваченный username в FILE2.

FILE2 

<form>
  <span id="receivedUserName"></span>
</form>

Просто не могу придумать, как обойти это ... Конечно, строка <h1 id="receivedUserName"></h1> в file1 предназначена для тестирования одного файла.
Заранее спасибо.

1 Ответ

0 голосов
/ 30 апреля 2018

Используйте localStorage что-то вроде ниже (я не проверял это): 

let username = document.getElementById('username').value;
localStorage.setItem('username', username);

Тогда в другом файле: 

let username = localStorage.getItem('username');
document.getElementById('receivedUserName').innerText = username;

ОЧЕНЬ ВАЖНАЯ СТОРОНА ПРИМЕЧАНИЕ: вы должны использовать innerText, а не innerHTML, чтобы установить содержимое элемента receivedUserName, если имя пользователя содержит < или &. Это не просто эстетическая вещь - это приведет к тому, что приложение будет плохо работать, и если когда-либо показывать данные от одного пользователя другому пользователю таким образом, у вас будет огромная дыра в безопасности, поскольку они могут поместить вредоносный скрипт в тег скрипта в своем имени пользователя. , Google XSS или межсайтовый скриптинг.

...