Element in DOM einfügen / bei Ansicht des Elementes JS ausführen

[DanielX]

Hallo liebe SELFHTML-Community

Ich habe zur Zeit folgendes Problem an dem ich nicht weiter komme.

Ich habe eine Webseite wo ich in einem DIV, welches mir als PopUp dient, Daten anzeige.

Beim anzeigen der Daten füge ich in innerHTML des PopUp-Divs, per JavaScript eine Seite zur Datenazeige hinzu.

Nun ist in der Seite die die Daten anzeigt ein festes DIV was zur Datenauswahl dient und dort drunter ein iFrame der die eigentlichen Daten anzeigt.

Nun soll der iFrame immer bis zum Ende des PopUp's gehen, also möchte ich dessen Größe per JavaScript berechnen.

Allerdings habe ich das Problem, das wenn ich in die anzuzeigende Seite JavaScript einbinde, dieses beim einfügen in das PopUp-Div verloren geht.

Also führe ich zur Zeit direkt nach dem einfügen der Seite per JavaScript, eine nächste Function aus, welche die Höhe des iFrames berechnen soll aus.

Allerdings habe ich dann das Problem das ich zwar die einzelnen DIV-Elemente mit document.getElementbyID() bekomme, aber das style zu diesem Zeitpunkt immer leer ist, außer Werte die in die Deklaration des Elementes geschrieben wurden, der Rest der aus CSS kommt fehlt.

Also hab ich behelfsmäßig erstmal mit ClientHeight gerechnet, nur das ist ja nicht das wahre, denn dort fehlen z.b. noch die Abstände wie padding oder marging.

Also rechne ich am Ende noch -25 Pixel, um margin und padding der Div-Elemente ab zu ziehen.

Die Funktion funktioniert zwar aber natürlich nur solange padding oder margin nicht geändert werden.

Und überhaupt gefällt mir das nicht, ich hoffe ich habe mich halbwegs verständlich Ausgedrückt und das ihr mir einen bessern Weg zeigen könnt ;-)

MfG DanielX

[Beat]

Sorry, deine Ausführung ist so ausschweifend wie unverständlich.
Ich weiss nicht, mit wie vielen divs und Seiten und Ressourcen ich es überhaupt zu tun habe.
Beschreibe bitte dein Anliegen mit vernünftigen und unterscheidbaren Namen.

mfg Beat

[DanielX]

OK, das habe ich leider schon befürchtet ich versuche es nochmal zu erklären.

Ich habe eine BingMaps Seite wo man wenn man rein clickt, den Netzbetreiber und ähnliches an dieser Position angezeigt bekommt.

Dort gibt es nun auch einen Link neben dem Namen des Netzbetreiber welches einem die Nutzungsentgelte an dieser Stelle anzeigen soll.

Der Link ist mit einer Javascript Funktion versehen welche, zum anzeigen meines Info-PopUp dient.

Wird die Funktion zum anzeigen aufgerufen, stellt sie ein Request mit Parameter wie dem Netzbetreiber an eine aspx-Seite(getNutzungsentgelte.apx).

Die aspx Seite füllt sich nun anhand der übergebenen Parameter mit den Nötigen Daten.

Die Seite ist folgendermaßen aufgebaut, oben eine einzeilige Überschrift, dann ein DIV-Block der 100Pixel groß ist und zur Auswahl verschiedener Tarife/Entgelte dient und als letztes ein iFrame wo der eigentlich Tarif angezeigt wird.

Ein iFrame aus dem Grunde da ich die Tarife als fertige HTML-Seite aus meiner Datenbank bekomme.

Und dieser besagte iFrame soll das PopUp-Div bis unten hin ausfüllen, als brauche ich dort ja JavaScript, da mir keine andere Möglichkeit bekannt ist.

Wenn nun das Response der Anfrage zurück kommt, wird das Response in mein PopUp-Div eingefügt, also der Inhalt von "getNutzungsentgelte.aspx".

Jetzt zum eigentlichen Problem, dem berechnen der Größe des iFrames.

Zuerst habe ich versucht in die getNutzungsentgelte.aspx einen Aufruf an die Javascript Funktion zum Berechnen der Größe zu machen.

Allerdings verliert sich dieser JavaScript-Code beim einfügen in mein PopUp-Div.

Also habe ich nun versucht die Funktion zum setzen der iFrame Größe direkt nach der Funktion zum anzeigen des PopUp's ausführen zu lassen.

Siehe Code:

  
function ShowPopUpTarif(content) {  
  
    SetPopUpForTarife(content);  
    SetiFrameForTarife();  
}  
  
function SetPopUpForTarife(content) { //berechnen der Größe des PopUp-Div  
    var txSuchen = document.getElementById("txSuchenNach");  
    txSuchen.disabled = true;  
  
    var divClose = document.getElementById("divPopUp");  
    var divPopUp = document.getElementById("divPopUp2");  
    var divPopUpContent = document.getElementById("divPopUpContent");  
  
    divClose.style.display = "block";  
  
    divPopUp.style.maxWidth = "";  
    divPopUp.style.height = "";  
    divPopUpContent.innerHTML = content;  
  
    var divMap = document.getElementById("map_canvas");  
    //        for (i = 0; i < divPopUp.childNodes.length; i++) {  
    //            divPopUp.removeChild(i);  
    //        }  
    //        divPopUp.appendChild(document.createTextNode(content));  
  
    var width = divMap.offsetWidth - ((divMap.offsetWidth / 100) * 20);  
    var height = divMap.offsetHeight - ((divMap.offsetHeight / 100) * 20);  
  
    var PopUpOffsetLeft = divMap.offsetLeft + ((divMap.offsetWidth - width) / 2);  
    var PopUpOffsetTop = divMap.offsetTop + ((divMap.offsetHeight - height) / 2);  
  
  
    divPopUp.style.width = width + "px";  
    divPopUp.style.height = height + "px";  
    divPopUp.style.left = PopUpOffsetLeft + "px";  
    divPopUp.style.top = PopUpOffsetTop + "px";  
}  
  
function SetiFrameForTarife() { //berechnen der Größe des iFrames im PopUp-Div  
    var divPopUpContent = document.getElementById("divPopUp2");  
    var divTarifHeader = document.getElementById("TarifHeader");  
    var iFrame = document.getElementById("iframeTarife");  
  
    var iFrameHeight = divPopUpContent.clientHeight - divTarifHeader.clientHeight - 25;  
    //var iFrameHeight = divPopUpContent.style.height - divPopUpContent.style.paddingTop - divPopUpContent.style.paddingBottom - divPopUpContent.style.borderTop - divPopUpContent.style.border.bottom - divTarifHeader.style.height - divTarifHeader.style.marginBottom;  
  
    iFrame.style.height = iFrameHeight + "px";  
}  

Allerdings ist hier nun das Problem, das zu dem Zeitpunkt wo die Funktion ausgeführt wird, die Elemente die ich vorher in das PopUp eingefügt habe, noch keinerlei Werte in dem Attribute style besitzen.

Nun benötige ich aber style um die Größe korrekt berechnen zu können, da es ja noch padding und ähnliche Abstände gibt.

Zur Zeit habe ich wie man in der gepostet Funktion sehen kann, leider nur den Weg mit ClientHeight zu rechnen und später die Abstände mit "-25px" ab zu ziehen.

Das funktioniert zwar für jetzt ist aber keine schöne Lösung, daher suche ich hier Rat.

[Beat]

Zuerst habe ich versucht in die getNutzungsentgelte.aspx einen Aufruf an die Javascript Funktion zum Berechnen der Größe zu machen.
Allerdings verliert sich dieser JavaScript-Code beim einfügen in mein PopUp-Div.

Im ersten Post schriebst du von der Methode ob.innerHTML. Dies erwartet natürlich reguläres HTML. Ich weiss nicht, was geschieht, wenn man auch ein script Element mit Javascript-Code einfügt. Ich bezweifle, dass der Code ausgeführt wird. Das eventuell meinst du mit "verliert sich".

Also habe ich nun versucht die Funktion zum setzen der iFrame Größe direkt nach der Funktion zum anzeigen des PopUp's ausführen zu lassen.

Ich sehe dein Problem mit dem Padding.
Wenn dein divPopUpContent eine absolute height hätte würde sich dein Problem schnell erledigen:
Wenn ich es richtig sehe, willst du, dass der iframe 100% der height und width der content-box des Eltern-Elements beinhaltet.

mfg Beat

[DanielX]

Im ersten Post schriebst du von der Methode ob.innerHTML. Dies erwartet natürlich reguläres HTML. Ich weiss nicht, was geschieht, wenn man auch ein script Element mit Javascript-Code einfügt. Ich bezweifle, dass der Code ausgeführt wird. Das eventuell meinst du mit "verliert sich".

Ja, denke du hast da Recht, dort erwartet er wohl reines HTML ohne jeglichen Code.

Ich sehe dein Problem mit dem Padding.
Wenn dein divPopUpContent eine absolute height hätte würde sich dein Problem schnell erledigen:
Wenn ich es richtig sehe, willst du, dass der iframe 100% der height und width der content-box des Eltern-Elements beinhaltet.

Fast Korrekt, das iFrame soll 100% des Elternelementes, abzüglich der Höhe der Überschrift und der Auswahl des PopUps, Hoch sein.

Ich hab meine Funktion mittlerweile so umgestellt, das ich ohne eine feste Angabe von Pixeln für Margin etc., die Höhe berechnen kann.

Dazu musste ich das Margin allerdings direkt in die Deklaration(heißt das "inline"?) des Divs schreiben.

Denn dann kann ich zum Zeitpunkt wo meine Funktion läuft auf das Margin zugreifen, solange das Margin aus CSS kommt aber nicht.

  
 var divPopUpContent = document.getElementById("divPopUpContent");  
    var divTarifHeader = document.getElementById("TarifHeader");  
    var iFrame = document.getElementById("iframeTarife");  
  
    var iFrameHeight = divPopUpContent.clientHeight - divTarifHeader.clientHeight - divTarifHeader.style.marginBottom.toString().replace(/px/g, "")  
    //var iFrameHeight = divPopUpContent.style.height - divPopUpContent.style.paddingTop - divPopUpContent.style.paddingBottom - divPopUpContent.style.borderTop - divPopUpContent.style.border.bottom - divTarifHeader.style.height - divTarifHeader.style.marginBottom;  
  
    iFrame.style.height = iFrameHeight + "px";  

Wirklich zufrieden bin ich mit der Berechnung noch nicht aber sie funktioniert zumindest und das auch im IE und Firefox. :-)

Wenn jemand noch eine Vorschlag hat, würde ich den natürlich trotzdem noch gerne lesen.

MfG DanielX