BimboBanani: function funktioniert in iFrame nicht...

hallo mitsammen!

In Foren begebe ich mich sehr ungern, also auch jetzt erst nach mehrstündigen Versuchen und Suchen.

Folgende Funktion, in eine eigene JS-Datei ausgelagert, funktioniert im Hauptfenster tadellos, aber nicht im iFrame. Und das sowohl bei FF, IE und Safari. Also liegts wohl an mir ;-) Und ich kapier einfach nicht, weshalb.

umd diese Funktion gehts:

  function centerElement(elem, mode) {  
    if (mode == "vert" || mode == "both") {  
      document.getElementById(elem).style.top = ((getSize()[1] - parseInt(document.getElementById(elem).style.height)) / 2) + getScrollXY()[1] + 'px';  
    }  
    if (mode == "horz" || mode == "both") {  
      document.getElementById(elem).style.left = ((getSize()[0] - parseInt(document.getElementById(elem).style.width)) / 2) + getScrollXY()[0] + 'px';  
    }  
  }

sie verwendet diese:

  function getSize() {  
    var myWidth = 0, myHeight = 0;  
    if( typeof( window.innerWidth ) == 'number' ) {  
      //Non-IE  
      myWidth = window.innerWidth;  
      myHeight = window.innerHeight;  
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {  
      //IE 6+ in 'standards compliant mode'  
      myWidth = document.documentElement.clientWidth;  
      myHeight = document.documentElement.clientHeight;  
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {  
      //IE 4 compatible  
      myWidth = document.body.clientWidth;  
      myHeight = document.body.clientHeight;  
    }  
    return [ myWidth, myHeight ];  
  }

Das Element, das er nicht mag ist:

  <div id="pwquest" class="pw0" name"hupsi">  
    <form name="pwform" method="get" action="../main/square.php">  
      <div class="pw1">Passwortabfrage</div>  
      <div class="pw2"><a href="javascript:showPwQuest('hidden');"><img src="../graphic/close.gif" width="16" height="16" border="0"></a></div>  
      <div class="pw3" style="top: 15px;">  
        Passwort: <input type="password" id="pw" name="pw" size="12" class="input">  
        <input type="hidden" id="catpw" name="catpw" value="">  
        <input type="hidden" name="page" value=" <?php echo"$page"; ?>">  
        <input type="hidden" name="cat" value=" <?php echo"$cat"; ?>">  
      </div>  
      <div class="pw3" style="top:30px">  
        <input type="image" src="../graphic/btngo.gif" alt="Abschicken">  
        &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:showPwQuest('hidden');"><img src="../graphic/btncancel.gif" width="100" height="20" border="0"></a></div>  
    </form>  
  </div>

CSS-Infos sind ausgelagert:

/* Passwortabfrage */  
/* -------------------------------------------------------- */  
.pw0 {position: absolute; top: 10px; left: 100px; width: 250px; height: 110px; z-index: 3; background-color: #D8D8D8; color: #000; border: 1px gray solid; visibility: hidden;}  
.pw1 {position: relative; width: 230px; left: 0px; background-color: #818181; color: #FFF; text-align: center; font-weight: bold; float: left; padding: 1px; letter-spacing: 2px}  
.pw2 {position: relative; width: 16px; right: 0px; background-color: #818181; color: #000; text-align: center; font-weight: bold; float: right; padding: 1px;}  
.pw3 {position: relative; width: 246px; right: 0px; background-color: #D8D8D8; text-align: center; vertical-align: middle; float: left; padding: 2px;}  

und der Funktionsaufruf lautet:

centerElement('pwquest', 'both')

doctype ist dieser (aber ich habs ohne Erfolg auch mit anderen probiert):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Beim Debugger vom IE mosert er übrigens bei "document.getElementById(elem)..." mit 'ungültiges Argument'.
Ich vermute, dass es an der Tatsache liegt, dass es im iFrame lauft, aber logisch ist mir das nicht wirklich. Pfhh... für Hilfe wäre ich echt und wirklich sehr froh!

Schönen Abend/Morgen!

Martin

  1. Lieber BimboBanani,

    function centerElement(elem, mode) {
         var el = document.getElementById(elem);
         if (el) {

    if (mode == "vert" || mode == "both") {

    el.style.top = ((getSize()[1] - parseInt(el.style.height)) / 2) + getScrollXY()[1] + 'px';

    }
        if (mode == "horz" || mode == "both") {

    el.style.left = ((getSize()[0] - parseInt(el.style.width)) / 2) + getScrollXY()[0] + 'px';

    }

    } else {
             alert("Element '"+elem+"' konnte nicht gefunden werden!");
         }

    }

      
    Es ist nicht sinnvoll getElementById() mehrfach für dasselbe Element immer und immer wieder aufzurufen. Außerdem könnte es ja sein, dass in dem Moment, in dem die Funktion aufgerufen wird, das entsprechende Element nicht gefunden werden kann. Das wird in Deiner Funktion nicht berücksichtigt!  
      
    Was Du auch berücksichtigen musst, ist die [Same-Origin-Policy von JavaScript](http://de.wikipedia.org/wiki/Same_origin_policy). Dazu hast Du keine nähreren Angaben gemacht, sodass ich nicht weiß, ob diese Dir jetzt ein Problem bereitet.  
      
    Liebe Grüße,  
      
    Felix Riesterer.
    
    -- 
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    
    1. Bonjour Felix,

      Es ist nicht sinnvoll getElementById() mehrfach für dasselbe Element immer und immer wieder aufzurufen. Außerdem könnte es ja sein, dass in dem Moment, in dem die Funktion aufgerufen wird, das entsprechende Element nicht gefunden werden kann. Das wird in Deiner Funktion nicht berücksichtigt!

      Ja klar, hast du recht, werd ich machen. Danke für die Mühe, das auch gleich auszuformulieren! Nebenbei sparen wir ja so auch noch ein par ns Rechnerzeit ;-)

      Was Du auch berücksichtigen musst, ist die Same-Origin-Policy von JavaScript. Dazu hast Du keine nähreren Angaben gemacht, sodass ich nicht weiß, ob diese Dir jetzt ein Problem bereitet.

      Aha, man lernt nie aus! Die SOP war mir nicht bekannt, werde mich auf die Fährte setzen und dann hier berichten!

      Schönen Gruß!
      Martin

    2. Hi Felix,

      Was Du auch berücksichtigen musst, ist die Same-Origin-Policy von JavaScript. Dazu hast Du keine nähreren Angaben gemacht, sodass ich nicht weiß, ob diese Dir jetzt ein Problem bereitet.

      Habe dazu recherchiert. Würde mich, ehrlich gesagt, wundern, wenn dort das Problem Läge, da ja SOP nur dann zuschlagen soll, wenn im iFrame eine abweichende Domain läuft. Ich glaube eher, dass meine nachttrunkenen Augen irgend etwas Klitzekleines übersehen haben.

      Hast du oder sonst jemand Erfahrung mit dem SOP? Spielt dsa überhaupt bei einer homogenen eigenen Seite eine Rolle?

      Herzliche Grüße
      Martin

      1. Hi!

        Hast du oder sonst jemand Erfahrung mit dem SOP? Spielt dsa überhaupt bei einer homogenen eigenen Seite eine Rolle?

        Nein. Normalerweise spielt das in solchen Szenarien keine Rolle.

        Ich habe mich mit deinem Problem bisher nicht naeher auseinandergesetzt, als dass ich Dir hier jetzt damit weiterhelfen koennte.

        --
        Signaturen sind blöd!
  2. Hi,

    Folgende Funktion, in eine eigene JS-Datei ausgelagert, funktioniert im Hauptfenster tadellos, aber nicht im iFrame. Und das sowohl bei FF, IE und Safari. Also liegts wohl an mir ;-) Und ich kapier einfach nicht, weshalb.

    Wird das Script in das Dokument eingebunden, in dem sich auch das betroffene Element befindet?

    Was sagt die Fehlerkonsole des Firefox?

    document.getElementById(elem).style.top = ((getSize()[1] - parseInt(document.getElementById(elem).style.height)) / 2) + getScrollXY()[1] + 'px';

    Du machst keinerlei Fehlerbehandlung.
    Das Element könnte nicht existieren, es könnte die height-Eigenschaft nicht per Javascript zugreifbar sein, ...

    Was macht getScrollXY()?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    1. Hallo Andreas,

      Wird das Script in das Dokument eingebunden, in dem sich auch das betroffene Element befindet?

      Nein, hab ich in einer includeten js-Datei. Funktioniert ja auch im Hauptfenster.

      Was sagt die Fehlerkonsole des Firefox?

      Die sagt alles Mögliche an anderen Orten wo alles eh funzt, aber hier schweigt sie stille

      Du machst keinerlei Fehlerbehandlung.

      Da hast du völlig recht. Nur: Das Element existiert definitiv.

      Das Element könnte nicht existieren, es könnte die height-Eigenschaft nicht per Javascript zugreifbar sein, ...

      Allerdings scheint genau hier das Problem zu liegen: Er verhölt sich so als ob er es scheinbar nicht findet. Nur - warum??

      Was macht getScrollXY()?

      Die aktuelle Scroll-Position ermitteln, damit die Vertikal-Zentrierung aktuell auch in der Mitte ist.

      Bei all dem: Es funzt ja im Hauptfenster, nur im iFrame nicht

      ciao, Martin

      1. Hiho!

        Hast du zufaellig ein Onlinebeispiel? Das koennte ich evtl. fix checken, ohne dass ich mir deinen Code antue. Ich hab hier immerhin nen Job zu erledigen. ;)

        --
        Signaturen sind blöd!
        1. Olà Steel.

          Hast du zufaellig ein Onlinebeispiel? Das koennte ich evtl. fix checken, ohne dass ich mir deinen Code antue. Ich hab hier immerhin nen Job zu erledigen. ;)

          Die Seite ist noch nicht online, denn dann sollte alles einigermaßen funktionieren - erst in ca. einer Woche. Entwickle dzt. lokal in einer VMware-Session und die ist nach außen hin dicht.

          Aber ich kann mit einem Workaround vorderhand leben und dir dann den Link gerne geben.

          Ich möchte das Thema aber unbedingt klären, denn ungeklärte Sachen im Underground sind nicht gut.

          cu
          Martin

          1. Hi,

            Hast du zufaellig ein Onlinebeispiel? Das koennte ich evtl. fix checken, ohne dass ich mir deinen Code antue. Ich hab hier immerhin nen Job zu erledigen. ;)

            Die Seite ist noch nicht online,

            Tja. Dann kann Dir halt keiner wirklich dabei helfen ...

            denn dann sollte alles einigermaßen funktionieren

            und das tritt dann ggf. nie ein ...

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            O o ostern ...
            Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
          2. Hoi!

            Wenn du das in ein temporaeres Unterverzeichnis oder irgendeinen Testwebspace laden koenntest, waer das gut.

            --
            Signaturen sind blöd!
            1. Hoi!

              Wenn du das in ein temporaeres Unterverzeichnis oder irgendeinen Testwebspace laden koenntest, waer das gut.

              Würde ich gerne aber auf meinem Server hab ich nur mySQL und das Projekt ist in PostreSQL, muss also auf die gesamte Installation warten

              1. Moin!

                Hoi!

                Wenn du das in ein temporaeres Unterverzeichnis oder irgendeinen Testwebspace laden koenntest, waer das gut.

                Würde ich gerne aber auf meinem Server hab ich nur mySQL und das Projekt ist in PostreSQL, muss also auf die gesamte Installation warten

                Du hast augenscheinlich ja nur ein HTML+Javascript-Problem. Also speichere den im Spiel befindlichen Quellcode der HTML-Seiten und des Javascripts ab, reduziere den Code am besten auf das Minimum (also insbesondere alles raus, was nichts mit dem Problem zu tun hat), und gucke, ob bei dir lokal das Problem noch existiert. Dann online stellen, mindestens in irgendein Pastebin. :)

                - Sven Rautenberg

                1. Hallo Sven!

                  Du hast augenscheinlich ja nur ein HTML+Javascript-Problem. Also speichere den im Spiel befindlichen Quellcode der HTML-Seiten und des Javascripts ab, reduziere den Code am besten auf das Minimum (also insbesondere alles raus, was nichts mit dem Problem zu tun hat), und gucke, ob bei dir lokal das Problem noch existiert. Dann online stellen, mindestens in irgendein Pastebin. :)

                  Ja, ist ein HTML+Javascript-Problem. Aber das Isolieren ist mir unter aktuellem Zeitdruck zu viel Aufwand. Werde gerne in wenigen Tagen, wenn die Seite online ist, mich nochmals melden!

                  Danke derweil an Dich und alle für Euer Engagement!

                  Martin

      2. Hi,

        Wird das Script in das Dokument eingebunden,
        Nein, hab ich in einer includeten js-Datei.

        Du kennst die Bedeutung der Wörter "eingebunden" und "include"?

        Die Frage ist halt, in welchses Dokument hast Du sie eingebunden.

        Die sagt alles Mögliche an anderen Orten wo alles eh funzt, aber hier schweigt sie stille

        Das glaube ich nicht.
        Aber da Du die Seite nicht online hast, kann ich es nicht prüfen.

        Bei all dem: Es funzt ja im Hauptfenster, nur im iFrame nicht

        Insofern wäre das Online-Beispiel wichtig. Aber das verweigerst Du ja.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
        1. Hallo Andreas!

          Insofern wäre das Online-Beispiel wichtig. Aber das verweigerst Du ja.

          Ich verweigere es nicht, :-) sondern ich muss erst alles auf dem externen Server installieren (db, linux-Module usw.). Ziemlich viel Arbeit, das Projekt ist eher größer. Hätte kein Problem mit hergeben, nur ist es leider noch nicht.

          ciao
          Martin

      3. Lieber BimboBanani,

        Nur: Das Element existiert definitiv.

        dann wird die Funktion zu einem Zeitpunkt ausgeführt, an dem dieses Element eben doch noch nicht existiert.

        Hast Du das mit einer entsprechenden alert-Prüfung (siehe meine frühere Antwort) getestet?

        Alternativ kann es natürlich sein, dass nicht alle Eigenschaften des Elements so verfügbar sind, wie Du das in Deiner Funktion benötigst, z.B. weil das Element noch nicht gerendert wird. Solche Probleme lassen sich in der Regel mit einem Timeout lösen:

        window.setTimeout(200, function () { ... el.style ... });

        Wie Du siehst, kannst Du in dem setTimeout-Aufruf die Funktion gleich an Ort und Stelle notieren, was den Vorteil hat, dass Du lokale Variablen in der Funktion weiter benutzen kannst (Closures).

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Hi Felix!

          window.setTimeout(200, function () { ... el.style ... });

          Hmm... hab ich noch nicht daran gedacht, dass das Ding noch nicht da sein könnte, aber das klingt einleuchtend, irgendwann muss ers ja machen. Obwohl... wenn das Formular schon aufgebaut ist?
          Aber ich werden Deinem Tip nachgehen - danke - und dann berichten, ob es geholfen hat!

          Liebe Grüße
          Martin

  3. @@BimboBanani:

    nuqneH

    document.getElementById(elem).style.top = ((getSize()[1] - parseInt(document.getElementById(elem).style.height)) / 2) + getScrollXY()[1] + 'px';

    Tut das denn das Gewünschte? Lass dir mal den Wert von document.getElementById(elem).style.height (bzw. document.getElementById(elem).style.width) ausgeben (per console.log() bzw. alert()).

    Im style-Objekt sind nur solche Eigenschaften, die mit JavaScript oder inline (@style-Attribut) gesetzt wurden. (Beides pfui!)

    Zum Auslesen von Style-Eigenschaften dient getComputedStyle() (in alten IEs currentStyle), siehe [molily]. Höhe und Breite bekommt man auch über [ref:self812;javascript/objekte/all.htm#offset_width@title=offsetWidth] bzw. [ref:self812;javascript/objekte/all.htm#offset_height@title=offsetHeight].

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. hi!

      Zum Auslesen von Style-Eigenschaften dient getComputedStyle() (in alten IEs currentStyle), siehe [molily]. Höhe und Breite bekommt man auch über [ref:self812;javascript/objekte/all.htm#offset_width@title=offsetWidth] bzw. [ref:self812;javascript/objekte/all.htm#offset_height@title=offsetHeight].

      Danke für diese Information! Werde mich gleich mal damit auseinandersetzen! Wird eventuell auch einiges anderes beantworten, was mir bis dato seltsam vorkam.

      Werde berichten.

      Grüße
      Martin