Einbindung externer Webseiten via Javascript/jQuery
Upcoming SlideShare
Loading in...5
×
 

Einbindung externer Webseiten via Javascript/jQuery

on

  • 9,923 views

 

Statistics

Views

Total Views
9,923
Views on SlideShare
9,541
Embed Views
382

Actions

Likes
0
Downloads
6
Comments
0

2 Embeds 382

http://www.in2code.de 379
http://relaunch.in2code.de 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Einbindung externer Webseiten via Javascript/jQuery Einbindung externer Webseiten via Javascript/jQuery Presentation Transcript

  • Einbindung externer Inhalte via Javascript/jQuery
  • 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
  • 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.
  • Hintergrund1. - Die Seite mit dem zu ladenden Inhalt
  • Hintergrund2. - Die fertige Seite mit geladenem Inhalt
  • Aufbau der einzubindenden Seite
    Geplante Funktionalität der Links:
    • 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).
    Link
  • 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
  • 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:
  • 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;
    }
  • 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)
  • 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.
  • 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/");
  • 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);
    },
    });
  • 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#leftul.a-z-menu a').live('click', function(event){
    event.preventDefault();
    varurl = $(this).attr('href');
    varbaseurl = 'http://www.trustedhost.de/PFADZUMINHALT/';
    if (url.indexOf('http') == -1) {
    url = baseurl + url;
    }
    varloadurl = '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“.
  • 6. - Links aus Textbereich auch in linken Div-Container laden 1. - Problematik: 1. Lösung
    Jetzt 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:
    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) {
    » Danachwiedermit Javascript & jQuery den Inhaltprüfen und laden (6.2).
  • 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 <ul>-Tags mitderKlasse “a-z-menu”.
    » Danachwiedermit Javascript & jQuery den Inhaltprüfen und laden (6.2).
  • 6. - Links aus Textbereich auch in linken Div-Container laden2. - Umsetzung
    Nach einer der beiden, gerade besprochenen Zeilen, muss nun wieder folgender Code geschrieben werden:
    event.preventDefault();
    varurl = $(this).attr('href');
    varbaseurl = 'http://www.trustedhost.de/PFADZUMINHALT/';
    if (url.indexOf('http') == -1) {
    url = baseurl + url;
    }
    varloadurl = '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.
  • 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.
  • 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) {
    varreturnstring = 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);
    },
    });
  • 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.
  • Vielen Dank
    Referent: David Richter
    www.in2code.de
    Stefan Busemann
    Tina Gasteiger
    Alex Kellner
    In2code.