Запись в элемент HTML из функции JavaScript - PullRequest
Новая
       8

Запись в элемент HTML из функции JavaScript

0 голосов
/ 03 февраля 2019

У меня есть файл JavaScript, в котором я использую расширение Chrome для сбора данных о веб-странице, и я хотел бы отобразить его в popup.Я новичок в веб-разработке, и у меня возникают проблемы с определением наилучшего способа отправки этой страницы информации в виде текста из моего файла .js в мой файл .html после выполнения какого-либо прослушивателя событий.элемент, который я пытался записать, был output1.

popup.js 

chrome.tabs.onActivated.addListener(function (tab) {
  chrome.tabs.query({
  active: true,
  currentWindow: true
  },
  function (tabs) {
    var tab = tabs[0];
    var id = tab.id;
    var url = tab.url;
    var title = tab.title;
    var host = new URL(url).hostname;
    console.log("id: " + id + "\nurl:" + url + "\nhost:" + host + "\ntitle: " + title);
  output1.text = host;
  });
});

popup.html 

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <h3>Domain output</h3>
    <output name="output1"></output>
    <script src="popup.js"></script>
  </body>
</html>

Ответы [ 3 ]

0 голосов
/ 03 февраля 2019

Предположим, что вы определили manifest.json и popup.js правильно , вы можете использовать .innerHTML или .textContent: 

var x = document.getElementsByName("output1");
x[0].innerHTML = host;
/*x[0].textContent = host;*/

Обратите внимание, что getElementsByName выбирает все элементы, используя выбранное вами имя.Который в примере был output1, если у вас было более 1 элемента с одинаковыми именами.Затем вам нужно выбрать индекс с помощью 0, как в примере с фрагментом. 

var host = "host content";
document.addEventListener('DOMContentLoaded', function () {
 var x = document.getElementsByName("output1");
 x[0].textContent = host;
 x[1].innerHTML = "h3";
});
<output name="output1"></output>

<h3 name="output1"></h3>
0 голосов
/ 03 февраля 2019

Решено с использованием следующего и chrome.storage.sync для извлечения сохраненного значения, которое будет передано в HTML.

popup.js 

document.addEventListener("DOMContentLoaded", function (event) {
  chrome.storage.sync.get("key", function (value) {
    console.log("New key value: " + value["key"]);
    document.getElementById("outputKey").value = value["key"];

});});

0 голосов
/ 03 февраля 2019

Вы должны добавить идентификатор к элементу вывода, а затем получить к нему доступ через свой js.

Обновите свой выходной тег с идентификатором: 

<output id="output1" name="output1"></output>

Измените строку назначения в js с: 

  output1.text = host;

до: 

document.getElementById("output1").value = host;
...