1

JavaScript と XUL を使用して Firefox 拡張機能を作成しています。私のコードの一部は、いくつかの XUL マークアップを取り、それを既存のコンテナー要素内に動的に追加できる必要があります。したがって、基本的には appendChild() が必要ですが、Node オブジェクトの代わりにテキスト文字列を使用します。これを行うために、この質問に記載されている方法を試しました。残念ながら、これはうまくいかないようです。div.childNodes が空の nodeList を返すように見えますが、これはコンテナーに追加することさえできません。エラーは 

Error: Could not convert JavaScript argument arg 0 [nsIDOMXULElement.appendChild]

何が間違っているのかよくわかりません。これを機能させる方法、またはコンテナーのマークアップを動的に設定する別の方法はありますか?

注: コンテナー要素の型はrichlistboxです。

    function updateContainerData(containerName){
      try{
        var resultsArray = DB.queryAsync("SELECT nodeData FROM waffleapps_privateurl");

        container = document.getElementById(containerName);

        for (var i = 0; i < resultsArray.length; i++) {

            /*
            // This works - appending an actual Node ( duplicate from a template)
            template = document.getElementById("list-item-template");
            dupNode = template.cloneNode(true);
            dupNode.setAttribute("hidden", false);
            container.appendChild(dupNode);
            */

            // This doesn't work
            div = document.createElement("div");
            //var s = '<li>text</li>';
var s = "<richlistitem id ='list-item-template'><hbox><checkbox label='' checked='true'/>  <description>DESCRIPTION</description><textbox>test</textbox><textbox></textbox></hbox></richlistitem>";

            div.innerHTML = s;
            var elements = div.childNodes;

            container.appendChild(elements); // error

        }
        }
        catch(err){
          alert( "Error: " + err.message);
        }
    }

次のコードを使用して、もう少し進めました。コンテナーに HTML 要素を挿入できるようになりましたが、XUL 要素が正しく解析されていないようです - チェックボックスとテキストボックスが表示されません。HTML と XUL マークアップを正しく解析するために、これをどのように変更すればよいかわかりません。

    var s = "<richlistitem id ='list-item-template'><hbox><checkbox label='' checked='true'/>  <description>DESCRIPTION</description><textbox>test</textbox><textbox></textbox></hbox></richlistitem>";
    var dp = new DOMParser();
    container.appendChild(dp.parseFromString(s, "text/xml").documentElement);
4

2 に答える 2

0

「要素」nodeList の各要素に対して appendChild を実行する必要があります (複数あると仮定します)。

また、リスト要素には、親の ol または ul 要素が必要です。

于 2012-05-14T01:46:33.493 に答える
0

ようやく、XUL マークアップ文字列を適切に解析して追加する方法がわかりました。parseFromString新しい からメソッドを使用できましたDOMParser()。要素のマークアップで名前空間 ( xmlns) が指定されていることを確認して、パーサーがそれが XUL マークアップであることを認識できるようにする必要がありました。

以下のコードは完全な例を示しています。

test.js:

test = function(){
    alert("testing");

    container = document.getElementById("testing");
    var dp = new DOMParser();

    // must specify namespace
    var s = "<textbox xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul' value='test' size='20'></textbox>";

    element = dp.parseFromString(s, "text/xml").documentElement;

    container.appendChild(element);

    document.getElementById("testing");
}

test.xul:

<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?>
<?xml-stylesheet type="text/css"
  href="chrome://testextensionname/skin/test.css" ?>

<!DOCTYPE window SYSTEM
  "chrome://testextensionname/locale/test.dtd">

<window xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
        id="testWindow"
        orient="vertical" title="TEST" statictitle="TEST"
        width="50" height="50;" screenX="10" screenY="10"
       >
<script type="application/x-javascript" src="chrome://testextensionname/content/test.js" />

<hbox id="testing">
<button label="Go" oncommand="test()"/>
<textbox value='test' size='20'></textbox>
</hbox>

</window>
于 2012-05-14T04:55:04.310 に答える