HTML Datei mit Javascript in Seite laden und CSS-Attribute behalten

[Bobo2040]

Hi, ich weiß nicht wie ich es im Titel hätte besser nennen können.

Mein Problem ist, das ich für die Schule eine kleine Webseite programmieren soll, um es mir einfacher zu machen habe ich das Layout relativ simpel aufgebaut. Die Idee ist, das der Nutzer auf einen Link in einem Menü klickt und dann wird über Javascript->onClick() die jeweilige Unterseite in das div->content_left geladen. Das Funktioniert auch alles einwandfrei, jedoch ist es jetzt so, das alle CSS-Klassen nichtmehr "ausgeführt" werden die sich in der Unterseite befinden. Sprich ich habe in der Datei die in die Seite geladen wird ein paar Klassen mit Attributen die auch in der Hauptseite sind(dort ist auch der CSS-Verweis). Leider werden die Attribute nicht umgesetzt und ich bekomme eine kleine Box angezeigt, die komplett ohne Design ist.

Ich hoffe ich konnte mein Problem halbwegs verständlich erklären, und wäre sehr froh über Lösungsvorschläge(bitte kein jQuery ). Ich gehe davon aus, das das Obert-Tag die CSS-Attribute nicht übernehmen kann, jedoch fände ich es "unschön" wenn ich in jede Datei die CSS-Dateien neu verlinke.

PS: Ich habe sogst wie keine Erfahrung in Javascript, jedoch kann ich es schlecht in PHP programmieren da mein Lehrer dieses nicht ausführen kann..

Das ist mein Code für Javascript:

function load_page(subpage) {
    document.getElementById("content_left").innerHTML='<object type="text/html" data="subpages/' + subpage + '.html"></object>';
} 

Hier wird es ausgeführt:

<a class="w3-bar-item w3-button w3-hover-blue" href="#link1" onclick="load_page('impressum')">Impressum</a>
<!--- ... --!>
<div id="content_left"></div>

[chim]

function load_page(subpage) {
document.getElementById("content_left").innerHTML= '<object type="text/html" data="subpages/' + subpage + '.html"></object>';
}

Leider kann ich mit dem schnipsel nicht genau alles erkennen:
Du scheinst mit innerHTML nur die betreffenden Codezeile auszulesen, es wird ausgegeben was in "content_left" ist. Entweder du integrierst dort das CSS oder du lädst die gesamte Datei.

[papalangi_44]

Warum löst du das nicht mit AJAX?

PS: Ich habe sogst wie keine Erfahrung in Javascript, jedoch kann ich es schlecht in PHP programmieren da mein Lehrer dieses nicht ausführen kann..

Macht der bei euch den Informatikuntericht, den sollte er auch einen Apache mit PHP haben. (oder ist das eine Schutzbehauptung?)

[tomBuilder]

  document.getElementById("content_left").innerHTML=  
   '<object type="text/html" data="subpages/' + subpage + '.html"></object>';

Was soll denn das ?

keine Ah nung wie Du zu Deiner

subpages/' + subpage + '.html

kommst, aber es macht meines Erachtens wenig Sinn das in ein data-attribute zu laden. hier mal ein Link zur docu: https://developer.mozilla.org/de/docs/Web/API/Element/innerHTML

[Bobo2040]

Du scheinst mit innerHTML nur die betreffenden Codezeile auszulesen, es wird ausgegeben was in "content_left" ist. Entweder du integrierst dort das CSS oder du lädst die gesamte Datei.

Also gibt es keine Möglichkeit das das was ich in die Webseite lade auch die Attribute von CSS auf der Hauptseite übernimmt?

Warum löst du das nicht mit AJAX?

Ich gucke mir das mal an wie man das mit AJAX lösen könnte, danke erstmal für den Hinweis.

Macht der bei euch den Informatikuntericht, den sollte er auch einen Apache mit PHP haben. (oder ist das eine Schutzbehauptung?)

Ich denke das ist eher eine Schutzbehauptung, aber naja..

kommst, aber es macht meines Erachtens wenig Sinn das in ein data-attribute zu laden. hier mal ein Link zur docu: https://developer.mozilla.org/de/doc...ment/innerHTML

Also ich habe auf der Webseite Unterseiten mit wo bestimmte Artikel drinne stehen. Und die sind in dem Ordner "subpages", wenn ich jetzt zum Beispiel das Impressum aufrufen möchte dann lade ich "subpages/impressum.html". Wenn ich einen Artikel laden möchte, dann "subpages/artikel_irgendwas.html".

[jonas3344]

Hast du denn schon Debugging betrieben? Die CSS-Datei ist geladen? Was sagen die Browser-Tools?

[Bobo2040]

Die CSS-Datei wird geladen, da ja der Rest der Webseite, abgesehen von allem was im <object> geladen wird korrekt angezeigt wird mit Farben, etc.

Ich habe jetzt einfach in jeder Unterseite die CSS-Datei integriert. Also ist das Problem gelöst. Jedoch bin ich gleich auf ein neues gestoßen, und zwar müssen wir ein Kontakt-Formular einbinden, eigentlich solle es einfach nur Oberflächlich sein, sprich ohne Funktion. Ich kann aber PHP und habe ein kleines Skript geschrieben, mit welchem ich Emails verschicken kann.
Das Problem ist, das ich die kontakt.html mit dem Form über Javascript in ein Object-Tag lade und anzeigen lasse. Wenn ich jetzt auf den Submit-Button Klicke, dann wird das Formular nicht ausgeführt, sondern ich werde einfach nur an eine weiße Seite weitergeleitet.. Ich denke das hängt mit dem Object-Tag zusammen. Kennt jemand hierfür eine Lösung?
Hier ist das Formular:

<form action="../php/send_mail.php" method="POST">
                    <div class="w3-row w3-section">
                        <div class="w3-col" style="width:5%"><i class="w3-xxlarge fa fa-user"></i></div>
                        <div class="w3-rest"><input class="w3-input w3-rest" type="text" placeholder="Name" name="name"></div>
                    </div>
                    <div class="w3-row w3-section">
                        <div class="w3-col" style="width:5%">
                            <i class="w3-xxlarge fa fa-at"></i>
                        </div>
                        <div class="w3-rest">
                            <input class="w3-input w3-rest" type="email" placeholder="Email" name="email">
                        </div>
                    </div>
                    <div class="w3-row w3-section">
                        <div class="w3-col" style="width:5%">
                            <i class="w3-xxlarge fa fa-comment"></i>
                        </div>
                        <div class="w3-rest">
                            <input class="w3-input w3-rest" type="text" placeholder="Nachricht" name="message">
                        </div>
                    </div>
                    <div class="w3-row w3-section">
                        <div class="w3-rest">
                            <input class="w3-button" type="submit" value="Senden" name="submit">
                        </div>
                    </div>
                </form> 

[tomBuilder]

ich verstehe immer noch nicht, wieso du HTML in ein data attribut von object lädst anstatt es einfach als child node dranzuhängen.
muss ich auch nicht, würde ich aber gerne.