einbindung externer webseiten via javascript/jquery

21
In2code.de Wir leben TYPO3 Wir leben TYPO3 Einbindung externer Inhalte via Javascript/jQuery

Upload: in2code

Post on 18-Dec-2014

9.896 views

Category:

Self Improvement


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

Wir leben TYPO3

Einbindung externer Inhaltevia Javascript/jQuery

Page 2: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

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

Page 3: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

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.

Page 4: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

Hintergrund1. - Die Seite mit dem zu ladenden Inhalt

Page 5: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

Hintergrund2. - Die fertige Seite mit geladenem Inhalt

Page 6: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

Aufbau der einzubindenden Seite

Alle Inhalte werden in den linken Div-Container geladen:

• Links im Menübereich werden im linken Div geladen

• Links im Fließtext sollen auch im linken Div geladen werden

Das A-Z-Menü (links) „filtert“ den Menübereich alphabetisch (eigene Seiten).

Geplante Funktionalität der

Links:

Link

Page 7: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

Grundlegender Ablaufplan

1. Zwei statische Div-Container erstellen und mit CSS wie in der Vorlage ausrichten. (Dieser Punkt wird übersprungen)

2. Laden der Start-Inhalte in beide Div-Container per jQuery.

3. Alle Links mit jQuery deaktivieren

4. via Javascript/jQuery die Link-Seiteninhalte manuell per Click in den linken Div laden

5. Via Javascript/jQuery die Links des A-Z-Menüs manuell per Click in den rechten Div laden

6. Links im Textbereich auch in den linken Div-Container laden

Page 8: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

2. - Laden der Start-Inhalte1. - Vorbereitung

Dafür müssen leider erstmal vorher einige Vorkehrungen, in Sachen Funktionalität und Sicherheit getroffen werden1. 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.

2. 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.

Page 9: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

2. - Laden der Start-Inhalte1. - Vorbereitung: Code: getUrlScript.php

function main() { $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;}

Page 10: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

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)

Page 11: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

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 dort stehen, da jQuery sonst den zuvor hineingeladenen Inhalt nicht mit einbezieht.

• 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.

Page 12: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

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:var url = $(this).attr('href');var baseurl = 'http://www.trustedhost.de/PFADZUMINHALT/';

if (url.indexOf('http') == -1) {url = baseurl + url;

}var loadurl = '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/");

Page 13: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

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);},

});

Page 14: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

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 <ul>-Element des HTML-Templates gesetzt. (hier z.B.: „a-z-menu“)

• Danach kann mit folgendem Code der Inhalt der links in den rechten Div geladen werden:

$('div#left ul.a-z-menu a').live('click', function(event){event.preventDefault();var url = $(this).attr('href');var baseurl = 'http://www.trustedhost.de/PFADZUMINHALT/';

if (url.indexOf('http') == -1) {url = baseurl + url;

}var loadurl = 'getUrlScript.php?url=' +url;$.ajax({

url: loadurl,success: function(data) {

$('div#right').html(data);(Klammern schließen)

» Im Grunde also das gleiche, wie beim Laden der Inhalte in den linken Div-Container (siehe 4.), nur dass nicht alle Links angesprochen werden, sondern nur die der Klasse/ID „a-z-menu“.

Page 15: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

6. - Links aus Textbereich auch in linken Div-Container laden

1. - Problematik: 1. LösungJetzt sollte natürlich, wenn im Fließtext des zuvor geladenen Inhalts ein Link vorkommt, dieser nicht auch im rechten Div-Container geladen werden, wie der Inhalt des A-Z-Menüs.Dafür gibt es zwei Lösungsmöglichkeiten:

1. Man sucht sich im Inhalt der zu ladenden Seite eine Bezugsstelle, wie zum Beispiel Paragraphen (<p>-Tags), falls diese verwendet wurden, und schreibt folgenden Code:

$('div#left p a').live('click', function(event) {

» Danach wieder mit Javascript & jQuery den Inhalt prüfen und laden (6.2).

Page 16: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

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, nach dieser Zeile folgende, Code wirkt sich auf alle Links im linken Div-Container, aber nicht auf die Links innerhalb des <ul>-Tags mit der Klasse “a-z-menu”.

» Danach wieder mit Javascript & jQuery den Inhalt prüfen und laden (6.2).

Page 17: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

6. - Links aus Textbereich auch in linken Div-Container laden

2. - Umsetzung• Nach einer der beiden, gerade besprochenen Zeilen, muss

nun wieder folgender Code geschrieben werden:

event.preventDefault();var url = $(this).attr('href');var baseurl = 'http://www.trustedhost.de/PFADZUMINHALT/';if (url.indexOf('http') == -1) {

url = baseurl + url;}var loadurl = 'getUrlScript.php?url=' + url;$.ajax({

url: loadurl,success: function(data) {

$('div#left').html(data);(Klammern schließen)

» Was wieder das gleiche, wie beim Laden der Inhalte in den linken Div-Container (siehe 4.) ist.

Page 18: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

RückblendeWas wurde nun geschafft?

• Es wird nun Standardmäßig immer erst eine Startseite in den jeweiligen Div-Container geladen.

• Es können die Inhalte der Links von rechts aus dem Menü nach links in den Content-Bereich geladen werden und die Inhalte der Links aus dem A-Z-Menü nach rechts in den Menübereich geladen werden, um dieses zu filtern.

• Es ist dafür gesorgt, dass Links die im Fließtext des geladenen Inhalts vorkommen, auch im linken Bereich geladen werden und nicht rechts im Menübereich.

• Das Problem, dass Ajax keine externen Seiten laden darf/kann, ist mit dem PHP-getUrlScript gelöst und gleichzeitig wurde damit noch die Sicherheitslücke, dass Inhalte von sämtlichen (bösartigen) Seiten von Dritten geladen und angezeigt werden könnten, geschlossen.

Page 19: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

Ausblick1. - Bilder

• Falls nun z.B. im Inhalt der geladenen Seiten noch Bilder vorhanden und relativ angegeben sind, müssen diese natürlich, entweder auf den eigenen Server kopiert, oder die Pfade mit folgendem Code wieder mit einer baseurl ersetzt/angepasst werden:

function images(string) {var returnstring = string.replace(/images\//g,"http://www.trustedhost.de/PFADZUMBILD/");returnstring = returnstring.replace(/..\//g,"http://www.trustedhost.de/PFADZUMBILD /");return returnstring;

» In dieser Funktion wird einmal nach „images/“ gesucht und einmal nach „../“ und jeweils mit der

baseurl(zum Bild) ersetzt. Diese muss nur noch innerhalb des Ladens des Inhalts mit übergeben werden:

$.ajax({url: loadurl,success: function(data) {

data = images(data);$('div#left').html(data);

},});

Page 20: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3

Ausblick2. - Weitere jQuery-Effekte - Beispiel: fadeIn

Um, den Look des Ganzen noch mehr zu verschönern (und nicht nur mit CSS), kann das Javascript- / jQuery-Script um ein paar Wörter/Zeilen erweitert werden:

• Beispielsweise ein Fade-In des Inhalts:$.ajax({

url: loadurl,success: function(data) {

data = images(data);$('div#left').hide().html(data).fadeIn('slow', function() {

(Klammern schließen)

• Das .hide() muss dort stehen, dass der eingelesene Inhalt erst noch ausgeblendet wird; sonst könnte er natürlich nicht einfaden.» 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.

Page 21: Einbindung externer Webseiten via Javascript/jQuery

In2code.deWir leben TYPO3In2code.

Vielen Dank

www.in2code.deStefan BusemannTina GasteigerAlex Kellner

Referent: David Richter