Frage von tim556, 30

JavaScript innerHTML höhe festlegen?

Hallo,

Ich habe eine Website, mit einem Div links, der die Postion fixed hat. Nun habe ich einen zweiten Div, wo ich andere Webseiten über Javascript mit der .innerHTML Funktion reinlade.

Leider lädt mir diese Funktion zwar wie gewollt meine Programmierte Seite in den Div aber in der höhe nutzt die Seite die ich reinlade nicht einmal die helft von dem Div, stattdessen kommt links eine Scrollbar wo man diesen mini Abschnitt hoch und runter Scrollen kann, was aber echt doof ist...

Habe dem Div schon min-height gegeben usw. aber nicht hat geholfen... Am Anfang hatte ich das selbe Problem auch mit der breite der Seite in dem Div, da hat mir aber die Angabe von width: 100% direkt im innerHTML befehle geholfen, aber das funktioniert bei der höhe nicht...

Mein innerHTML befehl sieht so aus: 

document.getElementById("mainContentDiv").innerHTML = '<object type="text/html" data="pfadt/zu/meiner/phpSeite.php" style="width:100%; min-height: 100%;"></object>';

Ich hoffe es hat jemand eine Lösung für mein Problem.

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von mastema666, 25

Hat das div selbst denn die nötige Höhe (bzw das Elternelement)? Denn daran orientieren sich ja auch die "min-height: 100%;".

Du könntest diesbezüglich auch mal mit den Entwicklerwerkzeugen des Browsers (in Chrome z.B. via F12 aufrufbar) nachsehen welches Element denn wirklich die Höhe beschränkt, also ob das überhaupt das object ist. 

Kommentar von tim556 ,

Der Div hat auch die höhe ja... und mit border: solid; hab ich mir den Div angeguckt der ist auch ganz unter, nur die Seite die ich in den Div laden möchte, hört einfach ich sag mal nach 10% auf... 

Mit den hab ich schon nachgeschaut leider ohne erfolg....

Kommentar von mastema666 ,

Funktioniert es denn, wenn du dem object eine feste Höhe in px zuweist (einfach um zu testen, ob es an dem Element selber liegt oder ggf nur das "abgeschnitten" wird, was darin geladen wird).

Und muss es überhaupt aus irgendeinem Grund unbedingt ein object sein oder würde auch ein "normales" div reichen? Letzteres könnte man ja auch recht einfach mit Inhalten einer externen Seite / Datei füllen, z.B. mit jQuery: http://api.jquery.com/load/ (geht natürlich auch ohne jQuery, aber ist halt komfortabler^^).

Kommentar von tim556 ,

Macht er leider auch nicht...

Ich würde gerne ganze Seiten einbinden, weil ich lieber eine neue Seite programmiere, als alles in eine lange Datei zu packen.. würde natürlich auch gehen, passt nur nicht in mein System rein und gefällt mir nicht so....

Ich würde das gerne ohne jquery machen, hast du dazu zufällig auch einen link? :)

Kommentar von mastema666 ,

Wenn es dir nur darum geht keine riesigen Dateien zu haben am Ende, kannst du doch auch direkt mit serverseitigen Includes arbeiten, am besten in Kombination mit einem Template-System, das bringt imho noch mehr "Ordnung" in den Code ;)

Was das "ohne jQuery" angeht, möglich ist das sicher, jQuery ist ja selbst nur JavaScript, es bietet nur vorgefertigte Funktionen, die es so in nativem JS nicht gibt (z.B. alles was Richtung Ajax geht). Ich würde halt einfach jQuery benutzen, ist ja nur eine Zeile Code, die man zusätzlich einbinden muss, man spart sich dafür aber ggf hunderte Zeilen.

Wenn du es unbedingt ohne versuchen willst, vielleicht hilft dir das ja weiter: 

https://goo.gl/NjAxJb
http://youmightnotneedjquery.com/ (einfach die jQuery Funktion, die du "nachbauen" willst, ins Suchfeld eingeben)

Kommentar von tim556 ,

Was jQuery ist weiß ;) benutz ich in anderen Projekten auch aber ich würde gerne dieses Projekt mal komplett ohne jQuery und co machen, deshalb die frage ob du eine Link hast ohne jQuery. 

Und danke für die beiden Links, ich guck mir das heute mal an und geb Rückmeldung obs geklappt hat oder nicht ^^

Kommentar von tim556 ,

Also es hat mit dem Code bei mir jetzt geklappt:

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText; document.getElementById("Div Angeben wo es rein soll").innerHTML = resp;
} else {
// We reached our target server, but it returned an error

}
};

request.onerror = function() {
// There was a connection error of some sort
};

request.send();
Kommentar von tim556 ,

Neues Problem...

Wenn ich meine Seite so in den Div lade, dann lädt er zwar mein JavaScript mit in den div, aber wenn ich die Funktion dann aufrufen möchte, bekomme ich immer gesagt, dass die Funktion nicht definiert ist. Jemand eine Idee?

Kommentar von mastema666 ,

Wenn die nachträglich geladenen Seiten wiederum JS enthalten wird das zumindest "von alleine" afaik ja auch nicht geparsed, du könntest es mal mit "eval()" versuchen, aber kA ob das geht wenn die Daten nicht reines JS sind. Wenns nicht funktioniert könntest du das JS ggf auch getrennt speichern und einmal das HTML laden sowie einmal nur das JS und es dann mit eval() ausführen.

Alternativ könntest du das JS aber ja auch gleich komplett auslagern, also alles in eine Datei und die einfach auf der "Hauptseite" einbinden. Hätte ja auch den Vorteil, dass diese Daten nur einmal geladen werden müssten, also je nachdem wie die Seite genutzt wird könnte das auch noch Traffic sparen (ist jetzt heutzutage zwar nicht mehr so wichtig, aber ist imho nie verkehrt etwas ressourcenschonend zu arbeiten).

Ansonsten könntest du natürlich auch noch ganz altmodisch die Dateien via iFrames einbinden, nicht mehr wirklich zeitgemäß, aber enthaltenes JS würde dann zumindest ausgeführt.

Kommentar von tim556 ,

Danke für die ganzen Ideen die werde ich wohl mal alle nacheinander Abarbeiten ^^

Aber ganz oben in meiner Frage hab ich ja eine Zeile Code, die meine Seite als Object in den Div einbindet. Ich habe langsam den Verdacht, dass das Object die volle höhe nicht annimmt, weil der Div in die es rein soll keine absolute Position hat, weil der Div Scrollbar bleiben soll und nur die "seitebar" mit fixed immer an der selben stelle bleiben soll.
Wenn ich irgendwie dem Object nun sagen könnte, dass es sich so lang machen kann, wie es will wäre ich vollkommen zufrieden. Hast du dazu vllt auch eine Idee?

Kommentar von mastema666 ,

Der einzige Grund, der mir da gerade einfiele, warum das nicht funktioniert, wäre dass der object-Tag die height in Pixeln erwartet, und du sie in Prozent angibst: http://www.w3schools.com/tags/tag_object.asp, das gilt zumindest für den "height" Parameter kA ob das via CSS auch mit % funktioniert, hab ehrlich gesagt aber auch schon ewig nicht mehr mit "object" gearbeitet^^

Ansonsten sollte das den Platz aber auch einnehmen können, wenn er denn da ist.

Aber ob das an dem darüber liegenden div liegt könnte man ja eigtl recht einfach testen, eine Datei mit nur einem div erstellen und dem Code, der das object dort einfügt, wenn es dann funktioniert, dann liegt es wohl daran, dass sich da mit dem restlichen Code irgendwas nicht verträgt.

Kommentar von tim556 ,

Also aus irgend einem Grund nimmt er aufeinmal die px Angaben an, leider ist das halt relativ unpraktisch... Ich werde wohl das mit dem JavaScript auslagern versuchen... Vielen Dank für deine Hilfe.

Antwort
von webflexer, 18

mit innerHTML weitere Child Objecte hinzufügen ist eher nicht praktikabel.

Verrsuche mal folgendes:

http://codepen.io/anon/pen/QGbJgE


Ansonsten mal das object per style auf display: block setzen

Kommentar von tim556 ,

Das hat so ziemlich den gleichen Effekt...

Aber wenn ich deine Code richtig interpretiere, dann setzt du den style doch schon in dieser Zeile: node.style.display = 'block'; schon auf display:block oder?

Sieht auf jedenfall alles nobler aus als mit innerHTML, aber warum ist das innerHTML nicht so empfehlenswert?  

Keine passende Antwort gefunden?

Fragen Sie die Community