Stack overflow...

Status
Niet open voor verdere reacties.
R

Robin S

Gebruiker
Lid geworden
4 dec 2008
Berichten
246
...at line: 0, jawel! :D Natuurlijk heb ik Google al even geraadpleegd en erachter gekomen dat het hoogstwaarschijnlijk aan een oneindige loop ligt. Maar díe kan ik nu juist niet ontdekken in het onderstaande stukje code dat mijn probleem doet ontstaan. (Uitéindelijk geldt dat childList.hasChildNodes()===false)...

Ik heb het geschreven als een vervanging van de element.getElementsByClassName("className")-functie van FF voor IE. Het vreemde is dat deze functie -heb 'm even 'test' genoemd- wél werkt in FF (geeft netjes een array met 2 span-elementen), maar niet in IE :(

Wie kan hier een eventuele oorzaak van zien? Alvast bedankt voor jullie tijd :)

[JS]Element.prototype.test = HTMLDocument.prototype.test = function(className){
var elementList = [];

var childList = this.childNodes;
var length = childList.length;
for(var i=0; i<length; i++){
if(childList.classList && childList.classList.contains(className)){
elementList.push(childList);
}
if(childList.hasChildNodes()){
var classedChildren = childList.test(className);
if(classedChildren.length>0){
var length2 = classedChildren.length;
for(var j=0; j<length2; j++){
elementList.push(classedChildren[j]);
}
}
}
}

return elementList;
};

window.onload = function(){
/*
...Stukje niet-relevante code...
*/

var buttonList = document.body.test("button");
alert([buttonList.length, buttonList].join("\n"));
}[/JS]
 
Ik test in dit geval met IE 8, dus compatibel met prototype.
Script is íets aangepast om de diepte van de loop te testen.

[JS]var functionAccess = 0;
var maxDepth = 0;
Element.prototype.test = function(className, depth){
functionAccess++;
maxDepth = Math.max(maxDepth, depth);

var elementList = [];

var childList = this.childNodes;
var length = childList.length;
for(var i=0; i<length; i++){
if(childList.classList && childList.classList.contains(className)){
elementList.push(childList);
}
if(childList.hasChildNodes()){
var classedChildren = childList.test(className, depth+1);
if(classedChildren.length>0){
var length2 = classedChildren.length;
for(var j=0; j<length2; j++){
elementList.push(classedChildren[j]);
}
}
}
}

return elementList;
};

window.onload = function(){
/*
...Stukje niet-relevante code...
*/

var buttonList = document.body.test("button", 0);
alert([functionAccess, maxDepth, buttonList.length, buttonList].join("\n"));
}[/JS]

functionAccess komt uit op 263
maxDepth komt uit op 15

FF geeft dezelfde uitkomsten, maar heeft geen stack overflow. Kun jij iets uit die getalletjes opmaken? Wellicht suggesties in welke richting gezocht kan worden? :confused:
 
Ik test in dit geval met IE 8, dus compatibel met prototype.
Klik om te vergroten...
Eh, als ik dit script in IE8 open:[JS]Element.prototype.test = function(){};[/JS]krijg ik de error:
Foutdetails webpagina

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Tijdstempel: Fri, 14 May 2010 09:38:05 UTC


Bericht: 'Element' is niet gedefinieerd
Regel: 1
Teken: 1
Code: 0
URI: file:///C:/Users/Gebruiker/Desktop/test.html
Klik om te vergroten...
Kan je anders eens de violledige code geven? Dus ook je html. Mocht dit erg veel zijn, maak dan even een klein testpagina'tje.



:thumb:
 
Die melding krijg ik alleen wanneer ik in de compatibiliteitsmodus zit.

Ik ontdekte dat Element.classList FF-only is, dus die heb ik eventjes vervangen door een eigen Element.isClassed. IE geeft nu, net als FF de twee juiste span-elementen terug. (Vooruitgang, jeej! :D) Nu zit ik dus alleen nog met de stackoverflow-melding. Hier is een fractie van de code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            var functionAccess = 0;
            var maxDepth = 0;
            Element.prototype.test = function(className, depth){
                functionAccess++;
                maxDepth = Math.max(maxDepth, depth);

                var elementList = [];

                var childList = this.childNodes;
                var length = childList.length;
                for(var i=0; i<length; i++){
                    if(childList[i].isClassed && childList[i].isClassed(className)){
                        elementList.push(childList[i]);
                    }
                    if(childList[i].hasChildNodes()){
                        var classedChildren = childList[i].test(className, depth+1);
                        if(classedChildren.length>0){
                            var length2 = classedChildren.length;
                            for(var j=0; j<length2; j++){
                                elementList.push(classedChildren[j]);
                            }
                        }
                    }
                }

                return elementList;
            };
            Element.prototype.isClassed = function(matchClass){
                var curClass = this.className;
                return curClass ? curClass.match(matchClass) : false;
            };

            window.onload = function(){
                /*
                ...Stukje niet-relevante code...
                */

                var buttonList = document.body.test("button", 0);
                alert([functionAccess, maxDepth, buttonList.length, buttonList].join("\n"));
            }
        </script>
        <title>getElementsByClassName - test.htm</title>
    </head>
    <body>
        <div id="content">
            <div id="tabs1">
                <div id="tabContent">
                    <div id="tabContent_settings" class="visible">
                        <h1>Instellingen</h1>
                        <div class="wrapper">
                            <div class="content">
                                <div class="toolbar">
                                    <input disabled="disabled" type="button" value="Nieuwe scroller" />
                                    <input disabled="disabled" type="button" value="Nieuw rooster" />
                                    <span class="button disabled up">Button 3</span>
                                    <span class="button disabled down">Button 4</span>
                                </div>
                                <div class="treeContent" id="settingsScrollers">
                                    <div class="scroller" id="treeContent_Brugklas">
                                        <table>
                                            <tr>
                                                <td colspan="2">
                                                    <div class="colorSelector">
                                                        <div class="lines">
                                                            <div class="r"><span style="left: 227px;"></span></div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
 
Aha!

Ross Boucher zei:
recursion that passes through the host global object is limited to a stack depth of 13
Klik om te vergroten...
(http://stackoverflow.com/questions/226102/stack-overflow-in-line-0-on-internet-explorer)

Als je een minder diepe pagina hebt (even serieus, 10 geneste <div>'s? :D) werkt ie wel zonder een error te geven:
HTML: 
        <div id="content">
            <div id="tabs1">

               <span class="button disabled up">Button 3</span>
               <span class="button disabled down">Button 4</span>
            </div>
        </div>
6
3
2
[object HTMLSpanElement],[object HTMLSpanElement]
Klik om te vergroten...
Zie de pagina van Ross waar het uitgelegd wordt.




:thumb:
 
Laatst bewerkt:
Geweldig :D Weet ik weer in welke richting ik de oplossing moet zoeken.

Fantastisch, deze uitspraak :P
Ross Boucher zei:
Every once in a while, you stumble upon a particularly strange bug. A bug that seems to defy the rules of space-time. A bug that makes you pull your hair out for days. A bug that almost certainly includes Internet Explorer.
Klik om te vergroten...
Thnx again :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan