EventHandler

[Christoph Schnauß]

guten Tag ;-)

so, jetzt klemmts mal an einer Stelle, an der ich das nicht für möglich hielt.
Folgendes: ich bin dabei, eine Seite mit ziemlich sehr vielen DIV's in iFrames zusammenzuschrauben, die per Mausklick sichtbar/unsichtbar werden. Weil einige iFrames Grafiken enthalten, würde ein Einbinden mit <iframe src="datei.htm"> die Ladezeit enorm verlängern, vor allem, wenn das zunächst versteckte iFrames sind. Ich habe mir mit "onmouseover" geholfen, so daß das Ganze etwa so aussieht:

document.write('<div ID="layer11">');
document.write('<iframe name="iframe11" width="840px" height="530px" frameborder="0" onmouseover=javascript:document.frames.iframe11.location.href="../kreis/main.htm"><p>Leider kann Ihr Browser keine iFrames darstellen. Wenn Sie sich die aufgerufene Seite trotzdem anschauen möchten, benutzen Sie bitte <a href="../kreis/main.htm" target="_blank">diesen link.</a></iframe>');
document.write('</div>');

Das funktioniert ganz gut. Das Problem ist nun, daß eine auf diese Art sichtbar gemachte Seite im iFrame weitere Verweise enthalten kann. Weil aber "onmouseover" aktiv ist, lassen sich solche Verweise nicht mehr anklicken, bzw. die Anzeige springt wieder zurück auf den ursprünglichen Seiteninhalt. Es wäre höchstens dann erreichbar, wenn ein Besucher die Maus absolut bewegungslos während des Anklickens hält  -  und das ist bissel viel verlangt. Wie kann ich jetzt den EventHandler deaktivieren, wenn er seine Aufgabe, den Frameinhalt zu laden, erfüllt hat ?

Die Adresse, um die es geht (falls jemand nachschauen möchte): http://www.cdumitte.de/temp  -  ähm, es mag noch ein paar andre Fehlerchen darin geben, daher ist das keine Bitte um einen Sitecheck.

einen erfolgreichen Tag wünscht

Christoph S.

[Joachim]

hi,

hast Du schon mal sowas getested:

var firstTime = true;
document.iframe11.onmouseover = function(){
    if(firstTime)
    {
         firstTime = false;
         tuWas();
    }
    else          document.iframe11.onmouseover =  null;
}

ist ungetested, sollte aber erreichen, dass der Event nur beim ersten Mal feuert.

hth + Gruss  Joachim

[Christoph Schnauß]

hallo Joachim,

danke für den Hinweis:

document.iframe11.onmouseover = function(){
    if(firstTime)
    {
         firstTime = false;
         tuWas();
    }
    else          document.iframe11.onmouseover =  null;
}

das Prinzip funktioniert, aber nicht ganz in dieser Form. Ich habs so gemacht:
function iframeOn(){
  var firstTime = true;
  document.frames.iframe11.onmouseover = function laden(){
    if(firstTime)
    {
         firstTime = false;
         document.frames.iframe11.location.href="../kreis/main.htm";
    }
    else          document.frames.iframe11.onmouseover =  null;
  }
}

Ich brauche schließlich einen Funktionsnamen, der später mit onmouseover="javascript:iframeOn()" aufgerufen werden kann, und "  document.frames.iframe11.onmouseover = function laden(){ " alleine hats nicht gebracht.

Jetzt hab ich nur noch das Problem, daß ich bisher 32 solche iframes habe (es können noch welche dazukommen). Die sind mehr oder weniger durchnumeriert. Und es ist bissel doll und wohl auch nicht ganz sinnvoll, für jeden jetzt eine eigene Funktion zu schreiben ... ich müßte die Namen wahrschenlich noch in ein Array packen, und den dann mit
document.frames.VariableMitArraywert.location.href
auslesen. Oder ?

Grüße aus Berlin

Christoph S.

[Joachim]

hi,

Ich brauche schließlich einen Funktionsnamen, der später mit onmouseover="javascript:iframeOn()" aufgerufen werden kann, und "  document.frames.iframe11.onmouseover = function laden(){ " alleine hats nicht gebracht.

hmm, ich bin jetzt nicht so drinne in der Geschichte, aber normalerweise brauchst Du _keinen_ eventhandler im tag, wenn Du ihn vorher so definierst:

document.getElementById("FRAMENAME").onmouseover = laden;

wohlgemerkt: ohne(), denn die Funktion wird nicht gerufen, es wird lediglich ein "Zeiger" gesetzt. Daher kann man so keine Paramerter uebergeben, dafuer gibt's folgendes Konstrukt:

document.getElementById("iframe11").onmouseover = new Function('laden("param")');

soweit die Theorie, ich denke aber, dass Du es wie folgt loesen kannst, rufe die folgende Funktion per _onload_ in body-tag auf und _vergiss_ die eventhandler im iframe-tag:

// alle auf true setzen
var firstTime = new Array(32);
for(var j in firstTime) firstTime[j] = 1;

function getEvent()
{
  // iframe0 - iframe 31
  for(var i = 0; i < 32; i++)
  {
    document.getElementById("iframe" + i).onmouseover = function()
    {
      if(firstTime[i])
      {
         firstTime[i] = 0;
         // sourcezuweisung geht afaik auch
         // pack alle src in ein Array
         document.getElementById("iframe" + i).src = mySrc[i];
      }
      document.getElementById("iframe" + i).onmouseover =  null;
    }
  }
}

ist jetzt ungetestet, koennte aber klappen. Nimm am Besten Mozilla  0.9.8 zum Testen, dann kannst Du Dir ueber die Konsole oder den Debugger die Fehler ansehen ;-)

hth + Gruss  Joachim

[Joachim]

hi,

man, ich penne schon, firstTime kann man sich schenken...

function getEvent()
{
  // iframe0 - iframe 31
  for(var i = 0; i < 32; i++)
  {
    document.getElementById("iframe" + i).onmouseover = function()
    {
      // sourcezuweisung geht afaik auch
      // pack alle src in ein Array
      document.getElementById("iframe" + i).src         =  mySrc[i];
      document.getElementById("iframe" + i).onmouseover =  null;
    }
  }
}

meld Dich wenns nicht klappt.

Gruss  Joachim

[Christoph Schnauß]

hi auch ...

meld Dich wenns nicht klappt.

werde ich machen müssen, denn da gibts jetzt noch nen "Phänomen", an dem ich heftig rumknabbern muß, was ganz Komisches ... Zum Thema kommt noch was, möglicherweise als neuer Thread mit anderem Titel, aber erstmal spiele ich das offline durch, ob ich da vielleicht nen  .  oder nen  '  übersehen hab.

Hast mal unter http://www.cdumitte.de/temp nachgeschaut, mit welchem Kram ich es zu tun hab? Die zugehörige *.js, um die es mir hier geht, ist unter http://www.cdumitte.de/scripts/index.js zu finden.

Grüße aus Berlin

Christoph S.

[Joachim]

hi,

Hast mal unter http://www.cdumitte.de/temp

iiiih!
(sorry, aber nicht meine Farbe)

;-)

Mit Mozilla/Mac funktiomiert das uebrigens, mit IE/Mac hingegen nicht.

http://www.cdumitte.de/scripts/index.js]

hmm, mir erscheint das Du es Dir sehr kompliziert machst. Warum machst Du so viele iframes, wo doch eigentlich _einer_ langt, dem Du wechselweise eine source zuweist - mit Deiner click-Funktion. Die onmouseover-Geschichte verstehe ich da nicht ganz.

Vielleicht habe ich jetzt ja auch irgendwas gruendlich missverstanden, aber teste doch mal das Script. Du brauchst eine neu.html und eine test.html um sie testhalber in den iframe zu laden.

Viel Erfolg  Joachim

<html>
<head>

<title>iframe</title>

<style type="text/css">
#ebene0 {
 position:absolute;
 top:30px;
 left:10px;
 width:auto;
 height:auto;
 visibility:hidden;
 background-color: red;
}

#dpl {
    position:absolute;
 top:80px;
 left:10px;
}
</style>

<script language="javascript1.2">

// some known objects
var nc  = !!(document.captureEvents && !document.getElementById);
var ie4   = !!(document.all    && !document.documentElement);

// einfache div-layer referenzieren
function dRef(num) {return (nc? document.layers[num]   : (ie4? document.all[num]       : document.getElementById(num)))}
function dRefS(num) {return (nc? document.layers[num]   : (ie4? document.all[num].style : document.getElementById(num).style))}

function go(url)
{
   dRef('dpl').src=url + ".html";
}

</script>

</head>

<body>
<a href="#" onmouseover="dRefS('ebene0').visibility='visible'">link</a>

<div id="ebene0">
<a href="#" onclick="go('test'); return false;">link1</a><br>
<a href="#" onclick="go('neu'); return false;">link2</a>
</div>

<iframe id="dpl" name="dpl" width="300px" height="200px" frameborder="0"></iframe>

</body>
</html>

[Christoph Schnauß]

n'abend,

(sorry, aber nicht meine Farbe)

schon gut, _das_ steht ja hier nicht zur Debatte ;-)

Mit Mozilla/Mac funktiomiert das uebrigens, mit IE/Mac hingegen nicht.

Sehr interessant. Leider hab ich keinen Mac, aber bei dem Stand, der augenblicklich online ist, war es zuletzt auf meinem PC genau andersrum: mit dem IE gings, mit mozilla/Netscape nicht. Der Konqueror (von LINUX aus) hat es zumindest offline ohne Meckern mitgemacht.

http://www.cdumitte.de/scripts/index.js]

hmm, mir erscheint das Du es Dir sehr kompliziert machst. Warum machst Du so viele iframes, wo doch eigentlich _einer_ langt, dem Du wechselweise eine source zuweist - mit Deiner click-Funktion.

Die Anmerkung ist richtig. Das hängt aber zur Zeit noch damit zusammen, daß es eine "historische" Dimension hat. Die Verzeichnisstruktur hab ich auch erst nach und nach aufgebaut. Das "Zusammenlegen" der iFrames ist am Ende meine geringste Sorge, das krieg ich hin.

Die onmouseover-Geschichte verstehe ich da nicht ganz.

Dazu müßtest du dir die zugehörige CSS anschauen htttp://www.cdumitte.de/scripts/index.css. Wenn der iFrame angezeigt wird, soll eben zeitgleich mit der Anzeige auch die entsprechende Seite hineingeladen werden, dazu ist der iFrame so positioniert, daß er zwangsweise beim Anklicken des entsprechenden Menüpunktes unter den Mauszeiger kommt.

Vielleicht habe ich jetzt ja auch irgendwas gruendlich missverstanden, aber teste doch mal das Script.

Wenns wirklich um meine persönliche Seite ginge, würde ich das wahrscehinlich in dieser Art machen. Aber die Seiten, die in den iFrame geladen werden, stehen nun (siehe die "Farb"-Diskussion ganz oben) ausdrücklich nicht unter meinem Copyright. Die werden von Leuten geschrieben / erstellt, die möglicherweise sogar Microsoft Word als HTML-Editor benutzen, und an dieser Stelle gebe ich jede Verantwortung für die Gesamtkonstruktion ab. Ich kann also nur an der Menükonstruktion und an der JS was herumbasteln.

danke erstmal für deine Anmerkungen

Grüße aus Berlin

Christoph S.

[Joachim]

hi,

noch eine kleine Anmerkung zur Feier das selfhtml wieder erreichbar ist ;-)

[...] dazu ist der iFrame so positioniert, daß er zwangsweise beim Anklicken des entsprechenden Menüpunktes unter den Mauszeiger kommt.

hmm, bin mir nicht sicher, ob onmouseover unter diesen Bedingungen zuverlaessig feuert. Vielleicht solltest Du da besser onmousemove verwenden.
Dennoch verstehe ich nicht, warum Du nicht _click_ und _laden_ verbindest, denn geladen werden soll die Source doch nach dem click.

[...] die werden von Leuten geschrieben / erstellt, die möglicherweise sogar Microsoft Word als HTML-Editor benutzen

grusig =8-|

danke erstmal für deine Anmerkungen

hoffe es hilft. Gruesse  Joachim

[Christoph Schnauß]

hi nochmals,

Dennoch verstehe ich nicht, warum Du nicht _click_ und _laden_ verbindest, denn geladen werden soll die Source doch nach dem click.

Eine vergleichbare Idee kam mir inzwischen auch. Hab dafür eine neue Funktion eingebaut, die iFrames drastisch reduziert (ist nur noch eins da), das onmouseover-Problem erledigt.
Steht aber noch nicht online.

Dafür gibts ein neues Problem:
<grins>
jetzt macht es nur noch der IE korrekt, mozilla/Netscape und Opera stellen den iFrame ja immer auf die oberste Ebene (da kann man mit z-Index rumfuchteln, wie man will), und die Folge ist, daß in diesen Browsern die Navigationslayer unter dem iFrame "verschwinden".
Ein Lösungsansatz wäre, in den sauren Apfel zu beißen, und auch für die Navigation nicht Layer, sondern doch wieder neue iFrames zu nehmen. Da hab ich aber ein völlig idiotisches Cache-Problem, das ich wohl mal in einem neuen Thread ansprechen werde.
</grins>

[...] die werden von Leuten geschrieben / erstellt, die möglicherweise sogar Microsoft Word als HTML-Editor benutzen
grusig =8-|

das kommentiere ich lieber nicht ;-)

Grüße aus Berlin

Christoph S.

[Christoph Schnauß]

so, jetzt hab ich nochmal einige Zeit am meinem Script rumgeschraubt ...

function getEvent()
{
  // iframe0 - iframe 31
  for(var i = 0; i < 32; i++)
  {
    document.getElementById("iframe" + i).onmouseover = function()
    {
      // sourcezuweisung geht afaik auch
      // pack alle src in ein Array
      document.getElementById("iframe" + i).src         =  mySrc[i];

Bis dahin kein Problem. Das ist ja "nur" eine Möglichkeit, die Sourcen in einen Array zu packen. Nur mit "src" habe ich Probleme gehabt (gibts offenbar als Javascript-Methode nicht). Mit location.href geht es, und das kann ja auch einen Array auslesen.

document.getElementById("iframe" + i).onmouseover =  null;

Das ist das eigentliche Problem. Der EventHandler soll damit in die Wüste geschickt werden. Wenn ich die gesamte Funktion aber bereits über "onmouseover" aufrufe, geschieht das nicht. Wenn ich sie, wie du geraten hattest, im body per "onload" aktiviere, geschieht das zwar, aber damit sind auch die "hover-Effekte" auf der geladenen Seite futsch, und außerdem hab ich dann das gesamte Ausgangsdilemma wieder, daß die Seiten alle geladen werden  -  mehr als 340 KB, Ladezeit beträgt dann mehr als zwei Minuten. Und genau das hatte ich ja verhindern wollen.
Mir bleibt nix andres übrig, als mit "onmouseover" zu arbeiten, wenn ich die Ladezeit verkürzen möchte. Wenn ich einen anderen EventHandler  -  z.B.  "onfocus"  -  nehme, braucht zwar "onmouseover" nicht mehr deaktivert werden, aber die zu ladende Seite erscheint dann erst nach einem Mausklick.

Problem ist also noch nicht gelöst :-(

Christoph S.

[Christoph Schnauß]

guten Abend,

das Prinzip funktioniert, aber nicht ganz in dieser Form. Ich habs so gemacht:
function iframeOn(){
  var firstTime = true;
  document.frames.iframe11.onmouseover = function laden(){
    if(firstTime)
    {
         firstTime = false;
         document.frames.iframe11.location.href="../kreis/main.htm";
    }
    else          document.frames.iframe11.onmouseover =  null;
  }
}

damit habe ich mich leider geirrt. Irgendwie hat das mit meinem lokalen Apache und mit dem Browser-Cache zu tun. Es schine gestern so, als ob das funktionieren würde ... das erstemal stutzig wurde ich, als mir mozilla plötzlich nix mehr anzeigen wollte. Es zeigt sich jetzt, daß bei einer solchen Konstruktion das "location.href" nicht ausgeführt wird

Grüße aus Berlin

Christoph S.