2

私はこのスクリプトを持っていますが、これは比較的単純だと思いました。基本的に、iframe のコンテンツのツリー レイアウトを作成します。ツリーの一部がホバーされると、対応する iframe 要素が「選択」されます。しかし、私の人生ではうまくいきません。以下に簡単な半疑似コードを示します。

function traverseTree(c,o){
    //c = the tree subset to put more stuff in
    //o = the element to traverse
    var treeNode = D.createElement('div');
    c.appendChild(treeNode);
    treeNode.innerHTML = o.tagName;
    treeNode['refNode'] = o;
    treeNode.addEventListener('mouseover',check,false);
    loop(o.children){
        traverseTree(treeNode,o.child);
    }
}
function check(e){
    alert(e.target.refNode);
}

問題は e.target.refNode で発生します。最初のノード (または HTML タグ) を持つ要素参照のみを提供します。残りは未定義です。しかし、設定した直後にtreeNode.refNodeを確認すると、常に正しいです。

編集：

だから、私は簡単なテストをしました：

<html>
<head>
    <title>Test</title>
    <script>
        window.onload = function(){
            createTree(document.getElementById('tree'),
                document.getElementById('page').contentWindow.document);
        }

        function createTree(c,o){
            //get list of children
            var children = o.childNodes;
            //loop through them and display them
            for (var i=0;i<children.length;i++){
                if (typeof(children[i].tagName) !== 'undefined'){
                    //Create a tree node
                    var node = document.createElement('div');
                    if (children[i].childNodes.length > 0){
                        node.style.borderLeft = '1px dotted black';
                        node.style.marginLeft = '15px';
                    }
                    c.appendChild(node);
                    //Reference to the actual node
                    node.refNode = children[i];
                    //Add events
                    node.addEventListener('mouseover',selectNode,false);
                    //Display what type of tag it is
                    node.innerHTML += "&lt;"+children[i].tagName.toLowerCase()+"&gt;";
                    //Add in its child nodes
                    createTree(node,children[i]);
                    //ending tag... CRASHES THE PROGRAM
                    node.innerHTML += "&lt;/"+children[i].tagName.toLowerCase()+"&gt;";
                }
            }
        }

        function selectNode(e){
            document.getElementById('info').innerHTML = e.target.refNode;
        }
    </script>
</head>
<body>
    <iframe id='page' src='some_page.html'></iframe>
    <div id='info' style='border-bottom:1px solid red;margin-bottom:10px;'></div>
    <div id='tree'></div>
</body>
</html>

そして、子ツリー ノードを追加した後に innerHTML を追加すると、子の refNode プロパティが失われることがわかりました。だから、それが問題が発生している場所です。

4

2 に答える 2

1

.innerHtmlしたがって、解決策はに変更することだと思い.appendChild(document.createTextNode(...))ます。私のスクリプトはローカルでの使用のみを目的としており、FF3 +専用に作成されているため、それ以外は問題ありません。

于 2010-10-06T04:08:34.203 に答える
0

要素の属性にオブジェクトを格納することはできません。属性をチェックすると、割り当てられたノードの文字列表現が表示されます。jquery を使用する場合は、jQuery.data()で実装できます。

于 2010-10-05T23:48:32.093 に答える