Как получить элемент XUL с помощью jQuery и распечатать дерево XUL DOM в виде строки? - PullRequest
Новая
       24

Как получить элемент XUL с помощью jQuery и распечатать дерево XUL DOM в виде строки?

0 голосов
/ 04 марта 2012

Я работаю над расширением Mozilla Thunderbird. Я установил DOM Inspector, Console и настроил свою среду разработки так, чтобы у меня было больше информации.

Чтобы упростить разработку при работе с оверлеями, я хотел бы получить ссылку на элемент XUL и затем отобразить дерево DOM в журнале для целей отладки / разработки.

В веб-разработке я бы просто зашел на консоль браузера и набрал: 

$('#user-menu').html();

и будет выводить содержимое HTML этого элемента в консоли.

Однако я не нашел способа сделать это с элементами XML / XUL. По сути, я хочу преобразовать XML / XUL DOM в строку, чтобы я мог распечатать его.

Я не хочу печатать только текст. Здесь уже есть ответы, которые показывают это. Я тоже хочу напечатать структуру.

Например, допустим, я получил узел с id = "attachmentList". 

var node = $('#attachmentList');

Как распечатать содержимое, чтобы я увидел: 

<hbox id="attachment">
    <description>Test</description>
    <xbox oncommand="do()">Do Something</xbox>
</hbox>

при условии, что DOM XML / XUL находится внутри элемента, идентифицируемого id = "attachmentList"?

UPDATE:

Вот красивое сообщение об ошибке, которое я получаю, когда пытаюсь использовать serializeToString. Я подозреваю, что могу делать что-то не так, но jQuery и XUL плохо документированы: 

Error: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) 
    [nsIDOMSerializer.serializeToString]
Source file: chrome://demo/content/messageOverlay.js
    Line: 72

Если это поможет, вот как я импортирую jQuery в Thunderbird: 

 window.addEventListener("load", function() {

      // was hoping this would eliminate that security error
      netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");

      var demolog = Components.classes["@mozilla.org/consoleservice;1"].
       getService(Components.interfaces.nsIConsoleService);

      demolog.logStringMessage("loading overlay...now load jQuery...");

      // loading jQuery here...
      var jQuery = loadjQuery(window);
      demolog.logStringMessage("loaded jQuery...now set $ alias...");
      var $ = jQuery;
      demolog.logStringMessage("jQuery loaded and configured...");

      // register a click handler. When I click this, it fires.
      document.getElementById("jamesdemo")
          .addEventListener("click", function() {
          demolog.logStringMessage("clicked");

         // /4396006/konvertirovat-xml-v-stroku-s-pomoschy-jquery
            var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"].
                createInstance(Components.interfaces.nsIDOMSerializer);  
            demolog.logStringMessage( "created XMLSerializer..." );  

// this threw the security error
//                var sXML = oSerializer.serializeToString($('#attachmentView'));  

              // as does this...
              var sXML = oSerializer.serializeToString(
                   document.getElementById('#attachmentView'));  

              // doesn't get this far at all
              demolog.logStringMessage("XML = " + sXML);  

              // when this was in scope, it threw the same error.
              demolog.logStringMessage( (new XMLSerializer()).serializeToString($('#attachmentView').get(0).childNodes));  


            demolog.logStringMessage( "attachmentView = " + $('#attachmentView').get(0).childNodes );

          // This prints Object [XULElement], but of course cannot be serialized.
          demolog.logStringMessage( "attachmentitem" + $('#attachmentitem').get(0) );

      });

  });

1 Ответ

1 голос
/ 05 марта 2012

Вы должны использовать XMLSerializer (то же самое, что и nsIDOMSerializer, но проще для доступа). Вы должны учитывать, что он ожидает DOM-узлы, а не объекты JQuery. Это должно работать: 

var element = document.getElementById("attachmentView");
var sXML = new XMLSerializer().serializeToString(element);

Если вы действительно хотите использовать jQuery, этот подход к получению элемента также должен работать: 

var element = $("#attachmentView")[0];
...