[JS] GetElementById probleem met frames - Softwareontwikkeling

vrijdag 13 augustus 2004 21:32

Acties:

Topicstarter

Ik heb de volgende frames pagina (ja frames):

code:

-----------------------------
|    |       top       |    |
|    |                 |    |
|    |-----------------|    |
|    |    |            |    |
|    |    |            |    |
|    | m  |            |    |
|    | e  |  contents  |    |
|    | n  |            |    |
|    | u  |            |    |
|    |    |            |    |
|    |    |            |    |
|    |    |            |    |
|    |    |            |    |
|    |    |            |    |
-----------------------------

In het "top"-frame staan een aantal images. Deze images moeten veranderen aan de hand van de pagina die in het "contents"-frame staan. Stel dat er een pagina genaamd "p3" geladen wordt in het "contents"-frame. Dan moet het plaatje in het "top"-frame veranderen van p3_off.jpg naar p3_on.jpg om te laten zien dat men op de p3-pagina is aanbeland.

Ik gebruik hiervoor het volgende script (met dank aan McVirusS) dat in de frameset-pagina wordt geladen:

JavaScript:

     var sImages = Array();
     sImages[ "p1" ] = Array( "img/nav/p1_off.jpg", "img/nav/p1_on.jpg" );
     sImages[ "p2" ] = Array( "img/nav/p2_off.jpg", "img/nav/p2_on.jpg" );
     sImages[ "p3" ] = Array( "img/nav/p3_off.jpg", "img/nav/p3_on.jpg" );
     sImages[ "p4" ] = Array( "img/nav/p4_off.jpg", "img/nav/p4_on.jpg" );
     sImages[ "p5" ] = Array( "img/nav/p5_off.jpg", "img/nav/p5_on.jpg" );
     sImages[ "p6" ] = Array( "img/nav/p6_off.jpg", "img/nav/p6_on.jpg" );
     sImages[ "p7" ] = Array( "img/nav/p7_off.jpg", "img/nav/p7_on.jpg" );
     sImages[ "p8" ] = Array( "img/nav/p8_off.jpg", "img/nav/p8_on.jpg" );

     function activateImage( id ) {
         for( key in sImages ) {
             if( key != id ) {
                 document.getElementById( key ).src = sImages[ key ][0];
             } else {
                 document.getElementById( key ).src = sImages[ key ][1];
             }
         }
     }

De functie activateImage weet welk id hij moet hebben doordat deze code in de pagina's van het "contents"-frame staat, ik neem weer het voorbeeld van "p3":

HTML:

1	<body onload="parent.frames['top'].activateImage('p3');">

Alle plaatjes in het "top"-frame worden op deze manier aangeduid:

HTML:

1	[img]"img/nav/p3_off.jpg"[/img]

En dan nu het probleem:
In Firefox werkt dit script zonder enig probleem. In IE wil het voor geen meter, ik krijg dan de fout: "document.GetElementById(...) null or not an object".

Iemand enig idee waar dit aan zou kunnen liggen? Ik kom er niet meer uit..

vrijdag 13 augustus 2004 21:38

Acties:

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Dan bestaat er dus in het document geen element met het id 'p3'. Bestaat dit wel in het topframe, dan dénk ik dat IE met 'document' het document van waaruit de functie is aangeroepen benadert, waar het object ook inderdaad niet bestaat. Doe eens een alert( document.title ); in die functie, kun je zien welke pagina IE pakt

Maar dit is misschien een long shot

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

vrijdag 13 augustus 2004 21:41

Acties:

Daan

Topicstarter

Prammenhanger schreef op 13 augustus 2004 @ 21:38:
Dan bestaat er dus in het document geen element met het id 'p3'. Bestaat dit wel in het topframe, dan dénk ik dat IE met 'document' het document van waaruit de functie is aangeroepen benadert, waar het object ook inderdaad niet bestaat. Doe eens een alert( document.title ); in die functie, kun je zien welke pagina IE pakt

Maar dit is misschien een long shot

Bij die alert pakt hij de title van de frameset-pagina, dus waar het script is ingeladen en niet van waaruit de functie is aangeroepen.

vrijdag 13 augustus 2004 21:46

Acties:

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Maar dus ook niet de title van de pagina waar die images instaan begrijp ik?

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

vrijdag 13 augustus 2004 21:53

Acties:

Daan

Topicstarter

Prammenhanger schreef op 13 augustus 2004 @ 21:46:
Maar dus ook niet de title van de pagina waar die images instaan begrijp ik?

Dat begrijp je goed

vrijdag 13 augustus 2004 21:55

Acties:

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Oh ja, klein opmerkinkje: was 'top' niet een preserved word?

Probeer eens met 'header' of '_top' ofzo

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

vrijdag 13 augustus 2004 22:05

Acties:

Daan

Topicstarter

Prammenhanger schreef op 13 augustus 2004 @ 21:55:
Oh ja, klein opmerkinkje: was 'top' niet een preserved word? Probeer eens met 'header' of '_top' ofzo

Dat haalt niks uit

zaterdag 14 augustus 2004 10:52

Acties:

Daan

Topicstarter

Nu heb ik inmiddels de volgende verschillende functies van activateImage:

JavaScript:

     function activateImage( id ) {
         for( key in sImages ) {
             if( key != id ) {
                 document.getElementById( key ).src = sImages[ key ] [0];
             } else {
                 document.getElementById( key ).src = sImages[ key ] [1];
             }
         }
     }

Mozilla Firefox: Werkt.
Internet Explorer: Fout - document.getElementById(...) null or not an object.

JavaScript:

     function activateImage( id ) {
         for(i=0;i<sImages.length;i++) {
             if( sImages[i] != id ) {
                 document.getElementById( id ).src = sImages[i][0];
             } else {
                 document.getElementById( id ).src = sImages[i][1];
             }
         }
     }

Mozilla Firefox: Werkt niet, geen fout.
Internet Explorer: Werkt niet, geen fout.

JavaScript:

     var y; 

     function activateImage( id ) {  
       document.getElementById( id ).src = sImages[ id ][0];  

       if( y ) document.getElementById( y ).src = sImages[ y ][1]; 
       y=id; 
     }

Mozilla Firefox: Werkt.
Internet Explorer: Fout - document.getElementById(...) null or not an object.

Wat o wat doe ik fout

zaterdag 14 augustus 2004 11:28

Acties:

crisp

Devver

Pixelated

debug versie:

JavaScript:

function activateImage( id ) {
    for( var key in sImages ) {
        var img = document.getElementById( key );
        if ( img != null ) {
            if( key != id ) {
                img.src = sImages[ key ][0];
            } else {
                img.src = sImages[ key ][1];
            }
        } else {
          alert( 'Image with id '+key+' does not exist!' );
        } 
    }
}

[ Voor 7% gewijzigd door crisp op 14-08-2004 12:20 ]

Intentionally left blank

zaterdag 14 augustus 2004 11:47

Acties:

Daan

Topicstarter

@crisp
Krijg de melding dat de image id's niet bestaan. Deze staan echter wel gewoon in het "top"-frame. Wil IE deze id's in het frameset html-bestand hebben ofzo?
Met Firefox werkt het naar behoren, geen fouten.

zaterdag 14 augustus 2004 11:54

Acties:

DizzyWeb

Ondertiteld

Moet je niet iets met "parent" gaan kloten?
document.parent.frames["top"].getElementById oid?

zaterdag 14 augustus 2004 11:59

Acties:

crisp

Devver

Pixelated

Dit werkt bij mij:

index.html

HTML:

<html>
<frameset rows="100,*">
  <frame name="topframe" src="topframe.html" />
  <frame name="mainframe" src="mainframe.html" />
</frameset>
</html>

topframe.html

HTML:

<html>
<head>
<script type="text/javascript">

    var sImages = new Array();
    sImages[ "p1" ] = new Array( "img/nav/p1_off.jpg", "img/nav/p1_on.jpg" );
    sImages[ "p2" ] = new Array( "img/nav/p2_off.jpg", "img/nav/p2_on.jpg" );
    sImages[ "p3" ] = new Array( "img/nav/p3_off.jpg", "img/nav/p3_on.jpg" );
    sImages[ "p4" ] = new Array( "img/nav/p4_off.jpg", "img/nav/p4_on.jpg" );
    sImages[ "p5" ] = new Array( "img/nav/p5_off.jpg", "img/nav/p5_on.jpg" );
    sImages[ "p6" ] = new Array( "img/nav/p6_off.jpg", "img/nav/p6_on.jpg" );
    sImages[ "p7" ] = new Array( "img/nav/p7_off.jpg", "img/nav/p7_on.jpg" );
    sImages[ "p8" ] = new Array( "img/nav/p8_off.jpg", "img/nav/p8_on.jpg" );

    function activateImage( id ) {
        for( var key in sImages ) {
            var img = document.getElementById( key );
            if ( img != null ) {
                if( key != id ) {
                    img.src = sImages[ key ][0];
                } else {
                    img.src = sImages[ key ][1];
                }
            } else {
              alert( 'Image with id '+key+' does not exist!' );
            } 
        }
    }

</script>
</head>
<body>
<img id="p1" src="img/nav/p1_off.jpg" width="50" height="50" alt="" />
<img id="p2" src="img/nav/p2_off.jpg" width="50" height="50" alt="" />
<img id="p3" src="img/nav/p3_off.jpg" width="50" height="50" alt="" />
<img id="p4" src="img/nav/p4_off.jpg" width="50" height="50" alt="" />
<img id="p5" src="img/nav/p5_off.jpg" width="50" height="50" alt="" />
<img id="p6" src="img/nav/p6_off.jpg" width="50" height="50" alt="" />
<img id="p7" src="img/nav/p7_off.jpg" width="50" height="50" alt="" />
<img id="p8" src="img/nav/p8_off.jpg" width="50" height="50" alt="" />
</body>
</html>

mainframe.html

HTML:

<html>
<head>
<script type="text/javascript">

    function swapframeimage(which) {

      parent.frames['topframe'].activateImage(which);

    }

</script>
</head>
<body onload="swapframeimage('p1')">

</body>
</html>

note dat het netter is om in je functie swapframeimage eerst te checken of het frame bestaat, en vervolgens te checken of de pagina daarin ook al volledig geladen is en de functie activateImage bestaat.

Oh ja, en natuurlijk niet je topframe "top" noemen natuurlijk - dat is wel degelijk vragen om problemen

en let ook op het keyword "new" bij de Array constructor - het is geen PHP (zie hieronder voor een alternatief om array's te construeren).

Nog mooier is om in je topframe de plaatjes te preloaden en bij te houden in een global welk plaatje active is; je hoeft dan maar 2 plaatjes te swappen in plaats van allemaal (edit: zie post hieronder).

[ Voor 13% gewijzigd door crisp op 14-08-2004 12:19 ]

Intentionally left blank

zaterdag 14 augustus 2004 12:07

Acties:

crisp

Devver

Pixelated

met preload:

JavaScript:

    var sImages = [];
    sImages[ "p1" ] = [ "img/nav/p1_off.jpg", "img/nav/p1_on.jpg" ];
    sImages[ "p2" ] = [ "img/nav/p2_off.jpg", "img/nav/p2_on.jpg" ];
    sImages[ "p3" ] = [ "img/nav/p3_off.jpg", "img/nav/p3_on.jpg" ];
    sImages[ "p4" ] = [ "img/nav/p4_off.jpg", "img/nav/p4_on.jpg" ];
    sImages[ "p5" ] = [ "img/nav/p5_off.jpg", "img/nav/p5_on.jpg" ];
    sImages[ "p6" ] = [ "img/nav/p6_off.jpg", "img/nav/p6_on.jpg" ];
    sImages[ "p7" ] = [ "img/nav/p7_off.jpg", "img/nav/p7_on.jpg" ];
    sImages[ "p8" ] = [ "img/nav/p8_off.jpg", "img/nav/p8_on.jpg" ];

    var pImages = [];
    for ( var key in sImages ) {
        pImages[key] = [];
        pImages[key][0] = new Image(); pImages[key][0].src = sImages[key][0];
        pImages[key][1] = new Image(); pImages[key][1].src = sImages[key][1];
    }
    var activeImage = '';

    function activateImage( id ) {
      if (activeImage != '') document.getElementById( activeImage ).src = pImages[activeImage][0].src;
      document.getElementById( id ).src = pImages[id][1].src;
      activeImage = id;
    }

Intentionally left blank

zaterdag 14 augustus 2004 12:25

Acties:

Daan

Topicstarter

Wow crisp to the rescue, dat werkt perfect!

Heel erg bedankt!

Grootste probleem was volgens mij inderdaad dat het bovenste frame "top" heette. Dat veranderd in "topframe" en dat scheelde een hoop.

Bedankt voor de hulp allemaal.

[ Voor 55% gewijzigd door Daan op 14-08-2004 12:27 ]

zaterdag 14 augustus 2004 12:29

Acties:

Verwijderd

Phreak schreef op 14 augustus 2004 @ 12:25:
Wow crisp to the rescue, dat werkt perfect!
Heel erg bedankt!

Grootste probleem was volgens mij inderdaad dat het bovenste frame "top" heette. Dat veranderd in "topframe" en dat scheelde een hoop.

Bedankt voor de hulp allemaal.

[rml][ Alg] Naamgeving[/rml]
Meer dan een jaar oud topic, maar foute naamgeving is nog steeds de oorzaak van vele javascript problemen.

Pagina: 1

Reageer