2

Firefoxアドオンを作成していて、xulオーバーレイを使用してcanvas要素を挿入しようとしています。問題は、canvas要素を挿入したい場所の親xulノードにIDがないことです。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

4

2 に答える 2

2

これにオーバーレイを使用しようとすると、複数の問題が発生します。

  1. オーバーレイはIDなしでは機能しません。単に、要素をアドレス指定する別の方法がありません。
  2. オーバーレイは、ウィンドウが読み込まれたときに存在しないものには適用できません。オーバーレイは1回限りのものであり、後で作成される動的要素を考慮することはできません。
  3. オーバーレイは匿名要素（DOM Inspectorで赤で表示）には適用できません。これらの要素はXBLバインディングによって挿入され、XULドキュメントの一部ではありません。

JavaScriptを使用して、毎回「手動で」キャンバスを挿入する必要があります。TabOpenイベントを使用して、タブが開かれるたびに通知を受け取ることができます。このようなものが機能するはずです（テストされていないコード）：

// 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)

このコードはanonid属性を設定するのではなく、属性を設定することに注意してくださいid。IDは一意であると想定されているため、同じIDを12個の要素に割り当てないでください。

于 2012-05-26T08:24:53.140 に答える
1

これはIDなしでは機能しません。XULドキュメントにJavascriptを挿入して、XBLバインディングdocument.querySelectorの内部を検索し、動的に作成されたものをidに追加することができます。tabpanelscanvas

ただし、notificationbox新しいタブを開くたびに新しいタブが作成されるため、JavaScriptで新しいタブを監視し、それに応じてキャンバスを挿入する必要があります。

于 2012-05-26T06:04:10.060 に答える