xul을 id없이 오버레이하는 방법은 무엇입니까?

Question

파이어 폭스 addon을 작성 중이며 xul 오버레이를 사용하여 캔버스 요소를 삽입하려고합니다. 문제는 canvas 요소를 삽입하고자하는 곳의 부모 xul 노드에 ID가 없다는 것입니다. 이드가 없다면 할 수 있을까요? 나는 또한 당신이 아래에서 볼 수 있듯이 id가없는 요소들에 대해 anonid를 사용하려고 시도했으나, 그것도 운이 없었습니다.

내 XUL 오버레이 :

<?xml version="1.0"?> 
<overlay id="myOverlay" 
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
     xmlns:html="http://www.w3.org/1999/xhtml"> 

    <tabbrowser id="content"> 
     <tabbox anonid="tabbox"> 
      <tabpanels anonid="panelcontainer"> 
       <notificationbox> 
        <stack anonid="browserStack"> 
         <html:canvas id="myCanvas" height="100%" /> 
        </stack> 
       </notificationbox> 
      </tabpanels> 
     </tabbox> 
    </tabbrowser> 

</overlay> 

내가 캔버스 요소가이 같은 각 탭에있는 각 브라우저 요소 다음에 삽입하고 싶은 : http://img.photobucket.com/albums/v215/thegooddale/80eae9ee.jpg

Answer 1

이는 ID없이 작동하지 않습니다. document.querySelector을 사용하여 XBL 바인딩 내에 tabpanels을 찾은 다음 XUL 문서에 자바 스크립트를 삽입 한 다음 동적으로 생성 된 canvas을 id에 추가합니다.

그러나 새 탭을 열 때마다 notificationbox이라는 새 항목이 만들어 지므로 새 탭에 대한 자바 스크립트 감시 기능을 설정하고 이에 따라 캔버스를 삽입해야합니다.

Answer 2

이를 위해 오버레이를 사용하려는 시도 여러 문제가 있습니다

1. 오버레이는 그들은 단순히 요소를 해결하는 또 다른 방법이없는, ID가없이 작동하지 않습니다.
2. 오버레이는 창이로드 될 때 해당 항목에 적용 할 수 없습니다. 이는 일회성이며 나중에 생성되는 동적 요소를 고려할 수 없습니다.
3. 익명의 요소에는 오버레이를 적용 할 수 없습니다 (DOM Inspector에서 빨간색으로 표시됨). 이러한 요소는 XBL 바인딩에 의해 주입되며 XUL 문서의 일부가 아닙니다.

JavaScript를 사용하고 매번 캔버스를 "수동으로"주입해야합니다. 탭이 열릴 때마다 알림을 받으려면 TabOpen event을 사용할 수 있습니다. 이런 식으로 뭔가가 (테스트되지 않은 코드) 작동합니다 :이 코드는 anonid 속성보다는 id을 설정하는 것을

// Always wait for the window to initialize first 
window.addEventListener("load", function() 
{ 
    function initTab(tab) 
    { 
    var browser = window.gBrowser.getBrowserForTab(tab); 
    var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", 
              "canvas"); 
    canvas.setAttribute("anonid", "myCanvas"); 
    canvas.setAttribute("height", "100%"); 
    browser.parentNode.appendChild(canvas); 
    } 

    // Init all existing tabs first 
    var tabs = window.gBrowser.tabs; 
    for (var i = 0; i < tabs.length; i++) 
    initTab(tabs[i]); 

    // Listen to TabOpen to init any new tabs opened 
    window.gBrowser.tabContainer.addEventListener("TabOpen", function(event) 
    { 
    initTab(event.target); 
    }, false); 
}, false) 

주 - ID가 고유하도록되어를, 당신은 다스 요소에 동일한 ID를 할당해서는 안됩니다.