Wie ladet man dynamisch Html Seiten in ein div?

BloodSteam · 26. Juni 2018

Hallo,
also Ich weiß dass es viele solche Fragen gibt und kenne auch mehrere Antworten dazu.

Code:

$("div").load("page.html")

Es gibt jedoch mehrere Probleme hier.
1. Es wird kein Link erstellt wie zb "https://example.com/autos".
2. Javascript funktioniert in der dynamisch geladenen Seite(Datei) nicht mehr.
3. Der "zurück Button" funktioniert nicht

Darum dieser Thread, wie macht man es richtig?

ZAM · 26. Juni 2018

Uhu,

du hast da das gleiche Problem wie bei der anderen Sache, die ich dir schon geschrieben hatte - dieses Load passiert erst nach dem Dom-Load. Der Browser "weiß" in dem Fall nichts von den Scripten, die du in der page.html integriert hast.

Wenn du mit jQuery.load() eine Art Template-System machen willst, dann musst du auch ein wenig mehr Zeit in ein Konzept für die Callback-Funktionalität (complete) stecken.

DataDino · 27. Juni 2018

Das ganze ist wie schon grob angemerkt deutlich komplexer. Wenn du die Inhalte komplett per Async (Ajax) laden und verwalten willst und auch noch funktionierende Verweise nutzen möchtest, dann wird das eine ziemliche Hausnummer. Eine noch relativ einfache Methode ist das arbeiten mit Ankern, die du mit Javascript auswertest und den Inhalt entsprechend lädst. Dazu benötigst du ein entsprechendes Routing und ggf. auch die Möglichkeit, für Suchmaschinen die Meta-Informationen anzupassen. Entweder du schreibst das ganze selbst (für Einsteiger etwas fummelig, für geübte eigentlich kein Problem), schaust dir Frameworks wie z.B. vue.js an oder verzichtest auf den Asynchronen Aufbau und nutzt ein einfaches Routing über PHP. Sowas ist in 2 Minuten Quick-and-Dirty geschrieben und erfüllt seinen Zweck ohne zu murren.

BloodSteam · 28. Juni 2018

Also das dynamische ändern von Titel und URL hab Ich, die Seite ladet auch aber wenn Ich die gleiche URL öffne, kommt ein 404 Fehler.

Code:

  $("a").click(function(){
    var a = $(this);
	var b = a.attr("id");
    $("main").load("/pages/" + b + ".html");
	$.getScript("/js/" + b + ".js");
    $("title").text(b);
	history.pushState(null,b,"/signup");
  });

Mein Problem ist jetzt nur dass sich die "pushState" URL nicht mehr öffnet bzw die Seite wird nicht geladen.
Ich lade es halt dynamisch in das <main> Element und dadurch weiß der Server gar nicht was los ist.
Muss Ich es im Index einstellen dass es den String nach dem "/signup" slash nehmen soll und dann die dazugehörige Seite öffnet?

404 Not Found

@Edit

Ich brauche quasi sowas hier:

Code:

		var webAdress = window.location.href;
		var webPage = webAdress.substr(webAdress.indexOf("?") + 1);

		function loadPage(a){
			$("main").load("/pages/"+a+".html");
		}

		if(webPage == "https://advlist.cc/"){
			console.log("home");
		}else{
			loadPage(webPage);
		}

In "Theorie" funktioniert es, jedoch wenn man den Link einfügt leitet der SERVER weiter. Somit dient es nur als beispiel.
Ich müsste es wahrscheinlich mit .htaccess machen, jedoch kenne Ich mit damit null aus.

ZAM · 28. Juni 2018

Die Theorie sollte in der Form auch nur eine bleiben. Die Methode mit Übergabe von location-Params riecht nach XSS oder sogar CSRF-Anfälligkeit.

Das Wort heißt übrigens "lädt"

BloodSteam · 28. Juni 2018

ZAM schrieb:
Die Theorie sollte in der Form auch nur eine bleiben. Die Methode mit Übergabe von location-Params riecht nach XSS oder sogar CSRF-Anfälligkeit.

Das Wort heißt übrigens "lädt"

Also erstellt bspw das PCGH Forum für jedes Thread und jede Seite eine neue .html Datei, mit head, header, footer etc?
Wieso ist es dass denn so schlimm ?

ZAM · 28. Juni 2018

Nein - Template-System. Die Elemente werden durch ein PHP-Script zusammengebaut und dynamisch mit Inhalten versehen, je nach Bereich.

BloodSteam · 28. Juni 2018

Ich glaube dass es nur mit PHP und .htaccess geht.
Wenn ein User auf ein Link klickt, ändert sich auch das URL bzw "get". Bei Jquery oder JS wenn man get nimmt, ändert sich die URL nicht.

URL Rewriting for Beginners | Added Bytes

Mit PHP würde Ich die Daten mit AJAX senden und die URLs mit htaccess ändern.

DataDino · 29. Juni 2018

BloodSteam schrieb:
Ich glaube dass es nur mit PHP und .htaccess geht.
Wenn ein User auf ein Link klickt, ändert sich auch das URL bzw "get". Bei Jquery oder JS wenn man get nimmt, ändert sich die URL nicht.

Ok machen wir es mal anders:

1. Es wird kein Link erstellt wie zb "https://example.com/autos".
2. Javascript funktioniert in der dynamisch geladenen Seite(Datei) nicht mehr.
3. Der "zurück Button" funktioniert nicht

Zu 1.: Bei dieser URL navigierst du eine Ressource an, die der Server aufzulösen versucht. Dazu benötigt er, wenn er per HTACCESS keine andere Anweisung bekommt, das Directory "autos" im Document-Root und in dieser sollte dann auch eine index.html liegen. Ist das nicht der Fall, dann geht das auch nicht.

Zu 2.: Javascript auf der dynamisch geladenen Seite funktioniert schon. Du darfst nur nicht vergessen, das die Anwendung an sich schon läuft und du deswegen ein wenig umdenken musst. Das berühmte Document-Ready ist da semioptimal, da das Dokument schon Ready war, bevor die dynamische Seite geladen wurde.

Zu 3.: Der Zurückbutton funktioniert nur, wenn sich die URL auch ändert. Der Back-Button bedient sich an der Historie der Navigation. Ohne abweichender URL gibt es auch keine Navigation.

Und genau aus diesen Gründen habe ich ja auch von Ankern gereden. Statt example.com/autos versuche es mal mit example.com/#autos und werte dies beim laden der Seite mit Javascript aus:

Code:

$(document).ready(function() {
    var anker = location.hash.replace("#","");
    $("main").load("/pages/" + anker + ".html");
});

Das habe ich jetzt nicht testen können. Müsste aber hinhauen. Das heißt nach Document-Ready fragst du direkt den Anker ab, lädst die Seite dynamisch nach und baust auch alle Links mit den Ankern auf. Dabei musst du allerdings beachten, das du auch das Navigieren über einen Anker mitbekommst. Dazu registrierst du am besten einen EventListener. In diesem Fall HashChange:

Code:

window.addEventListener('hashchange', function() {
    var anker = location.hash.replace("#","");
    $("main").load("/pages/" + anker + ".html");[
});

Natürlich solltest du abfragen, ob location.hash leer ist und dann eine Default-Seite laden. Genauso solltest du prüfen, ob der Ajax-Request einen gültigen Status zurückliefert. Wenn er 404 zurückliefert, solltest du also auch eine 404-Meldung hinneinladen, damit der Nutzer bescheid weiß. Ansonsten tappt der im dunkeln

BloodSteam · 29. Juni 2018

@DataDino
Danke Danke,
das wäre halt auch eine Option mit weniger Code. Wenn man jetzt auf: Advlist.cc geht, wird es auch nicht geladen

@Edit
Achso, dass mit dem htaccess hab Ich drin jedoch mein Problem besteht immer noch.
Wenn man https://advlist.cc/signup besucht, wird nur die leere Seite geöffnet anstatt die volle Seite mit der html.

Es funktioniert auch nicht wenn man mit hashes arbeitet.

DataDino · 29. Juni 2018

Dann reden wir aneinander vorbei. Denn mit Hashes (Ankern) funktioniert sowas. Bester Beweis ist der Eventlistener:
advlist.cc/#test
Da rauf klicken und dann in der Adresszeile das #test in #signup ändern. Und oh wunder .... es geht!

Ashampoo_Snap_2018.06.29_18h29m08s_001_Advlist-cc - Mozilla Firefox.png

Wenn du jetzt noch das in den Code einfügst, dann solle es auch direkt nach dem Aufruf der Seite gehen:

Code:

$(document).ready(function() {
    var anker = location.hash.replace("#","");
    $("main").load("/pages/" + anker + ".html");
});

BloodSteam schrieb:
Achso, dass mit dem htaccess hab Ich drin jedoch mein Problem besteht immer noch.
Wenn man https://advlist.cc/signup besucht, wird nur die leere Seite geöffnet anstatt die volle Seite mit der html.

Das htaccess hilft dir nur dabei, alle Requests auf die index.html umzuleiten. Das allerdings würde dem dynamischen Nachladen Probleme machen. Denn Javascript setzt per Ajax auch nur einen normalen HTTP-Request ab. Dieser wird vom Server genauso behandelt wie der synchrone Request und würde ebenfalls eine Umleitung durchführen.

BloodSteam · 30. Juni 2018

Ja jetzt geht es, ich überlege wie Ich dies hier anders machen könnte.

Hab es jetzt so:

Code:

$(document).ready( function() {	
	function loadPage(){
		var anker = location.hash.replace("#","");
		$("main").load("/pages/" + anker + ".html");
	}
	
	window.addEventListener('hashchange', loadPage());
});

Aber...

Code:

$(document).ready( function() {	
		var anker = location.hash.replace("#","");
		$("main").load("/pages/" + anker + ".html");
});

funktioniert auch... Ich frage mich ob es da ein Unterschied gibt.

Yep gibt es, mit EventListener kann Ich mehrere Sacher sicher laden NUR/IMMER wenn sich der Hash ändert.

Code:

$(document).ready( function() {	
	function loadPage(){
		var hash = location.hash.replace("#","");
		var css_E = $('<link rel="stylesheet" type="text/css">');
		var css_H = "/css/" + hash + ".css";
		$("main").load("/pages/" + hash + ".html");
		if(css_E.attr('href',css_H)){
			addHead(css_E,css_H);
		}
		$.getScript("/js/" + hash + ".js");
	}
	
	function addHead(a,b){
		$('head').append(
			a.attr('href',b)
		);
	}
	
	window.addEventListener('hashchange', loadPage());
});

Nach 1-2h...

Code:

$(document).ready( function() {	
	
	if(location.hash){
		loadPage();
	}
	
	function loadPage(){
		/* get hash */
		var hash = location.hash.replace("#","");
		
		/* add CSS first based on hash (prevent css snap) */
		var css_E = $('<link rel="stylesheet" type="text/css">');
		var css_H = "/css/" + hash + ".css";
		if($('<link rel="stylesheet" type="text/css" href="' + hash + '">')){
			$('head').append(
				css_E.attr('href',css_H)
			);
		}
		
		/* load html*/
		$("main").load("/pages/" + hash + ".html");
		
		/* load script */
		$.getScript("/js/" + hash + ".js");
		
		
		console.log("hash = " + hash);
	}
	
	
	window.addEventListener('hashchange', function(){
		loadPage();
	});
});

#AusFehlernLerntMan #DebugBrain

DataDino · 30. Juni 2018

Na siehste. Klappt doch

Wie ladet man dynamisch Html Seiten in ein div?

BloodSteam

Guest

ZAM

Inventar

DataDino

Freizeitschrauber(in)

BloodSteam

Guest

ZAM

Inventar

BloodSteam

Guest

ZAM

Inventar

BloodSteam

Guest

DataDino

Freizeitschrauber(in)

BloodSteam

Guest

DataDino

Freizeitschrauber(in)

BloodSteam

Guest

DataDino

Freizeitschrauber(in)

Ähnliche Themen