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

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

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.

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

18. 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).

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 <ul>-Tags mitderKlasse “a-z-menu”. » Danachwiedermit Javascript & jQuery den Inhaltprüfen und laden (6.2).

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

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

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