expert TeVi

1. Einbindung externer Inhalte via Javascript/jQuery
2. Was soll erreicht werden?
Der Inhalt einer Seite (bestehend aus zwei unabhängigen Bereichen) soll als Inhalt in einer anderen Webseite eingebunden/angezeigt werden.
Es soll nicht grundlegend mit HTML (iFrame) oder PHP (cURL) gelöst werden
Es soll eine technisch sichere Einbindung sein
3. Hintergrund
Ich habe mich mit diesem Thema beschäftigt, da vor Kurzem der Auftrag reinkam, wie auf der vorherigen Seite beschrieben, den Inhalt einer Seite in eine andere Seite zu laden.
Auf der zu ladenden Seite war allerdings das Problem, dass diese mit Frames aufgebaut war und dadurch nicht simpel mit einem iFrame eingebunden werden konnte.
Zudem gab es noch ein paar andere Probleme, die während der Umsetzung aufkamen. Diese und deren Lösungen kommen aber in späteren Seiten noch zur Geltung.
Auf den nächsten Seiten sind beide Websites dargestellt: die zu ladende und die fertige Seite mit geladenem Inhalt.
4. Hintergrund1. – Die Seite mit dem zu ladenden Inhalt
5. Hintergrund2. – Die fertige Seite mit geladenem Inhalt
6. Aufbau der einzubindenden Seite
Geplante Funktionalität der Links:

Alle Inhalte werden in den linken Div-Container geladen: 7. Links im Menübereich werden im linken Div geladen 8. Links im Fließtext sollen auch im linken Div geladen werden 9. Das A-Z-Menü (links) „filtert“ den Menübereich alphabetisch (eigene Seiten).

Link
10. Grundlegender Ablaufplan
Zwei statische Div-Container erstellen und mit CSS wie in der Vorlage ausrichten. (Dieser Punkt wird übersprungen)
Laden der Start-Inhalte in beide Div-Container per jQuery.
Alle Links mit jQuery deaktivieren
via Javascript/jQuery die Link-Seiteninhalte manuell per Click in den linken Div laden
Via Javascript/jQuery die Links des A-Z-Menüs manuell per Click in den rechten Div laden
Links im Textbereich auch in den linken Div-Container laden
11. 2. – Laden der Start-Inhalte1. – Vorbereitung
Dafür müssen leider erstmal vorher einige Vorkehrungen, in Sachen Funktionalität und Sicherheit getroffen werden
Da Javascript die Inhalte einer fremden Seite nicht lesen darf, weil es im Gegensatz zu PHP und HTML nicht Serverseitig arbeitet, benötigen wir ein PHP-Script dazwischen:

Welches bewirkt, dass die Seite mit PHP geladen und ausgelesen wird, und Javascript, bzw. jQuery erst dann den Seiteninhalt in die Div-Container lädt.

Dadurch ist eine Sicherheitslücke entstanden; man könnte jederzeit über das Script irgendeinen Seiteninhalt aus dem Web in den Div-Container einschleusen.

Also muss in dem selben Script noch eine Abfrage eingebaut werden, welche den Host der URL ermittelt und ihn mit dem „vertrauten“ Host abgleicht.

2. – Laden der Start-Inhalte1. – Vorbereitung: Veranschaulichung des Problems
Javascript arbeitet nur Clientseitig, man kann sich das bildlich ungefähr so vorstellen:
12. 2. – Laden der Start-Inhalte1. – Vorbereitung: Code: getUrlScript.php
functionmain() {
$url = **GETURL**; //Dies ist ein Platzhalter, der PHP-Code dafür ist /für Vorzeigezwecke zu lang (aber leicht zu finden).
$urlarr = parse_url($url);
if (!stristr($urlarr[‘host’], ‘www.trustedhost.de’)) {
die(‘URL not allowed’);
}
$content = **GETURL**;
return $content;
}
13. 2. – Laden der Start-Inhalte2. – Inhalte laden mit jQuery & Ajax
Jetzt da die Seiteninhalte ganz bequem geladen werden können, nun der jQuery-Code:
$.ajax({
url: ‘getUrlScript.php?url=www.trustedhost.de/startseite.html’,
success: function(data) {
$(‘div#left’).html(data);
},
});
Hier wird als erstes dem zuvor erstellten getUrlScript die Start-URL der Seite, dessen Inhalte im linken Container anzeigt werden sollen übergeben.
(Das ganze muss natürlich für den rechten Container auch geschrieben sein)
14. 3. – Alle Links mit jQuery deaktivieren
Jetzt müssen noch die Links mit jQuery deaktiviert werden, dass vorerst nichts passiert wenn man sie anklickt.
Das funktioniert mit:$(‘div#left a’).live(‘click’, function(event){event.preventDefault();
Das “.live” muss dortstehen, da jQuery sonst den zuvorhineingeladenenInhaltnichtmiteinbezieht.
Hierdurch werden alle Links im linken Div-Container deaktiviert. – Das gleiche muss nun natürlich mit den Links im rechten, Menü-Container, auch gemacht werden.
15. 4. – Seiteninhalte manuell in linken Div laden1. – Auslesen der URL der Inhaltsseite
Problematik: Die Links sind evtl. relativ angegeben.
Lösung: zuerst wird darauf geprüft, ob „http“ im String der URL vorkommt und unsere „baseurl“ vor die Links gesetzt, falls nicht. Außerdem, muss dieser Inhalt natürlich auch noch durch die getUrlScript.php, um auf einen vertrauenswürdigen Host zu prüfen und die Inhalte einer externen Seite laden zu können.
Code:
varurl = $(this).attr(‘href’);
var baseurl = ‘http://www.trustedhost.de/PFADZUMINHALT/’;
if (url.indexOf(‘http’) == -1) {
url = baseurl + url;
}
varloadurl = ‘getUrlScript.php?url=’ + url;

Falls die Links relativ mit „../“ angegeben sein sollten, kann dies mit folgendem Code durch die baseurl ersetzt werden:

loadurl = loadurl.replace(/../g, “http://www.trustedhost.de/PFADZUMINHALT/”);
16. 4. – Seiteninhalte manuell in linken Div laden2. – Laden des Inhalts
Nun, kann der Inhalt wieder ganz einfach mit jQuery geladen werden; der zu ladende Inhalt steht jetzt in der Variable „loadurl“:
$.ajax({
url: loadurl,
success: function(data) {
$(‘div#left’).html(data);
},
});
17. 5. – Seiteninhalte aus A-Z-Menü manuell in rechten Div laden
Um das A-Z-Menü eindeutig ansprechen zu können benötigt dieses eine Klasse oder eine ID – z.B. im

-Tags), falls diese verwendet wurden, und schreibt folgenden Code:
$(‘div#left p a’).live(‘click’, function(event) {
» Danachwiedermit Javascript & jQuery den Inhaltprüfen und laden (6.2).
19. 6. – Links aus Textbereich auch in linken Div-Container laden 1. – Problematik: 2. Lösung
Die zweite Lösung ist zu empfehlen, wenn im Fließtext der einzubindenden Seite keine ansprechbaren Klassen oder IDs gesetzt wurden, aber das Menü, wie bei 5., die Klasse „a-z-menu“ besitzt :
$(‘div#left’ a).not(‘ul.a-z-menu a’).live(‘click’, function(event) {
Der, nachdieserZeilefolgende, Code wirktsich auf alle Links imlinken Div-Container, abernicht auf die Links innerhalb des

Andere schöne jQuery-Effekte hierfür wären noch: fadeOut, fadeToggle und eventuell, für Fortgeschrittene, ein „Slider“ welcher mit animate umgesetzt werden könnte.

Vielen Dank
Referent: David Richter
www.in2code.de
Stefan Busemann
Tina Gasteiger
Alex Kellner
In2code.