Динамически отображать данные во всплывающем окне, которое определяется в обработчике события onpopupshowing.

Question

Я разрабатываю расширение Firefox. На одной <menupopup>, onpopupshowing вызывает функцию JavaScript. Функция JavaScript извлекает список имен. Теперь эти имена должны отображаться в одном и том же всплывающем окне.

Как я могу получить это? По сути, мне нужно будет передать данные (так же, как мы используем bean-компоненты в Java) в браузер из функции JavaScript. Данные могут меняться каждый раз, когда вызывается всплывающее окно.

Answer 1

Вам нужно изменить DOM, представляя ваш menupopup. Например:

<menulist>
  <menupopup id="myMenuPopup">
    <menuitem id="firstItem" label="Mozilla" value="http://mozilla.org"/>
    <menuitem id="secondItem" label="Slashdot" value="http://slashdot.org"/>
    <menuitem id="thirdItem" label="Sourceforge" value="http://sf.net"/>
  </menupopup>
</menulist>

Теперь, если вы хотите добавить еще один элемент:

var myMenuPopup = document.getElementById("myMenuPopup");
var newItem = document.createElement("menuitem");
newItem.setAttribute("id", "anotherItem");
myMenuPopup.appendChild(newItem);

Если вы хотите удалить элемент:

var itemToRemove = myMenuPopup.getElementById("anotherItem");
myMenuPopup.appendChild(itemToRemove);

Здесь вы можете найти гораздо больше:

https://developer.mozilla.org/en/Dynamically_modifying_XUL-based_user_interface

Редактировать:

Я предполагаю, что ваша функция возвращает массив имен:

var nameLists = yourFunction();

for (var i=0; i<nameList.length; i++){
  var newItem = document.createElement("menuitem");
  newItem.setAttribute("label", nameList[i]);
  newItem.setAttribute("id", "item" + i);
  myMenuPopup.appendChild(newItem);
}

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