Das einfache Verarbeiten von Inhalten auf Internetseiten in der node.js Umgebung ist bequem mit dem Modul cheerio möglich. Hierbei läd man die Webseite wie gewohnt mit einem der verfügbaren HTTP Module. Injiziert nun zusätzlich die jQuery Bibliothek und läd den DOM in das jQuery Module. Ab diesem Punkt ist es möglich auf alle Elemente der Internetseite mit den gewohnten jQuery Funktionen zu bearbeiten bzw. Inhalte zu extrahieren.

Das Beispielskript sollte copy & paste funktionieren. 🙂

#!/usr/bin/env node
'use strict';
 
var http = require('http');
var cheerio = require('cheerio');
 
// socket timeout
var myTimeout = 100;
 
// on error
var err = function(e) {
	console.log(e)  
}
 
// used to set socket timeout
var timeout = function(socket) {
    socket.setTimeout(myTimeout);  
    socket.on('timeout', function() {
        req.abort();
    });
}
 
var req = http.get({host: 'example.com', port: 80, path: '/'}, function(res) {
 
    var html = '';
 
    // executed if part of data comes in
    res.on('data', function(data) {    
    	html += data;
 
    // executed if all data received
    }).on('end', function() {
 
        // check HTTP status / errors   	
	 console.log(res.statusCode);
 
	// load jquery (cheerio) to your received HTML document
	var $ = cheerio.load(html);
 
	// *** JQUERY LIKE CODE ***	  
	// use code like in browser
	$('h1').each(function() {
	    console.log($(this).text());
	});
     });
}).on('error', err).on('socket', timeout);

Alternativ kann natürlich auch ein synchroner HTTP Client verwendet werden.

Vorher die Installation des cheerio Moduls in der Shell nicht vergessen:

npm install cheerio
Keine Kommentare »
 

Dem Besucher die Möglichkeit zu geben die Anfahrt zu einem Unternehmensstandort berechnen zu lassen ist heut zu tage ein muss für jede Unternehmens Webseite. Unschön ist ein weiteres Fenster / Pop-Up das sich öffnet nur um eine Anfahrtsskizze über die Google Maps Funktion anzuzeigen. Im selben Fenster wollen wir Google Maps nicht öffnen. Wir wollen den Besucher nicht von der Webseite weg manövrieren.

Ein Lösungsvorschlag von mir ist das öffnen von Google Maps in einer Highlighting-Box wie der Shadowbox. Als angenehm empfunden haben viele Besucher einen zweiten Link für die Google Routen Berechnung. Bei den Vorhaben seine Anfahrtsroute zu berechnen sollte man dem Besucher nicht im Interface / Platz beschneiden.

Hierzu habe ich mithilfe von jQuery ein kleines Script geschrieben, das am besten in den Header des Dokumentes, nach dem jQuery Framework und der Shadowbox, eingebunden wird. Ein paar HTML Elemente müssen wir ebenfalls auf der Webseite platzieren um dem Besucher Interaktion zu ermöglichen.

Das Beispiel auf dieser Seite beeinhaltet die Anzeige der Anfahrt, dargestellt in der Shadowbox, ins Watergate nach Berlin.

Anfahrt anzeigen • Route berechnen
Fremd Beispiel 2:PSD zu WordPress Theme(unten auf der Seite)

Die Einrichtung um Google Maps in der Shadowbox öffnen zu lassen gestaltet sich, wenn man weiß wie, sehr einfach.
Das jQuery Framework und die Shadowbox müssen vor Script Aufruf in das HTML Dokument eingebunden werden. Dies geschieht im Kopfbereich folgerndermaßen:

<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="shadowbox.js" type="text/javascript"></script>

Aktuelle Downloads findest du hier:

Dieses Script bindet das „click“ Event an den Link und macht es uns möglich nach einem Klick eines Benutzers mit einer eigenen Funktion zu reagieren. In unserer Funktion werden wird der Wert des Formularfeldes ermittelt und als GET Parameter (Adresse) für den iFrame der Shadowbox verwendet.

Das zweite „click“ Event öffnet ein neues Fenster / Tab mit der Adresse aus dem Formularfeld für die Google Routen Berechnung.

jQuery(document).ready(function() {
   Shadowbox.init({
       handleOversize: 'drag',
       modal: true
   });
   jQuery('#google-route-b').bind('click', function() {
       Shadowbox.open({
	   content: jQuery(this).attr('href')+jQuery('#google-route-f').attr('value'),
  	   player:  'iframe'
      });
      return false;
   });
   jQuery('#google-route-d').bind('click', function() {
	jQuery(this).attr('href', jQuery(this).attr('href')+jQuery('#google-route-f').attr('value'));
	return true;
   });
});

Der Selektor #google-route-b steht hierbei für den Link auf den geklickt werden muss um unser „Formular“ abzusenden. #google-route-f bezeichnet das Feld mit der Adresse des Besuchers. Die Rückgabe von „false“ am Ende der Funktion verhindert das öffnen von den Google Routen im selben Fenster.

#google-route-d kennzeichnet den Link um die Google Routen Berechnung. Nach dem Einfügen der Adresse aus dem Input Feld in den Link wird „true“ zurück gegeben um dem Browser zu signalisieren weiter mit seiner standard Link Routine zu arbeiten.

<input type="text" name="saddr" title="Ihre Adresse" class="input-text" id="google-route-f">
<a href="http://maps.google.de?daddr=***DEINE STRAßE, DEINE STADT***&amp;&output=embed&saddr=" title="Anfahrt anzeigen" id="google-route-b" target="_blank">Anfahrt anzeigen</a>
<a href="http://maps.google.de?daddr=***DEINE STRAßE, DEINE STADT***&amp;saddr=" title="Route berechnen" id="google-route-d" target="_blank">Route berechnen</a>

***DEINE STRAßE, DEINE STADT*** ist natürlich durch die jeweilige Firmenadresse zu ersetzen.

Keine Kommentare »
 

Ob es ratsam ist externe Links in neuem Fenster / Tab zu öffnen bzw. Verweise generell in neuen Tabs / Fenstern zu öffnen ist umstritten. Grundsätzlich werden dabei zwei sinnvolle Ansätze vertreten.

  • Ansatz A

    Dem Benutzer ist es selbst überlassen wie sich Links nach anklicken verhalten. Alle Links öffnen sich im selben Fenster.

  • Ansatz B

    Dem Benutzer wird die Entscheidung abgenommen und externe Links öffnen sich in einem neuen Fenster / Tab. Hierbei wird die eigentliche Seite nicht verlassen.

Ich selbst tendiere zu Ansatz B. Sollte es, aus welchen Gründen auch immer, nicht möglich sein ein target=“_blank“ Server seitig in das HTML Dokument einzufügen verwende ich eine Javascript Funktion auf jQuery Basis.

Externe Links in neuem Fenster öffnen –extendable

Diese Methode ist insbesondere interessant wenn verschiedene Faktoren für die Prüfung eines Links erforderlich sind.

/* Nicht vergessen das jQuery Framework vor diesem Snippet einzubinden  */
jQuery(document).ready(function() {
	var getdomainname = function(url) {
		return url.split('/')[2].split(':')[0];
	}
	var targetblank = function() {	
		if (window.location.host != getdomainname(jQuery(this).attr('href')))
			jQuery(this).attr('target', '_blank');
	}
	jQuery('body a').each(targetblank);	
});

Mithilfe dieser Funktion können jederzeit auch einzelne Bereiche der Internetseite angesprochen werden. Strukturen ohne externe Links sollten auch aus Performance Gründen nicht von der Funktion überprüft werden.

Weitere Informationen zur Funktion getdomainname() findest du in meinem vorherigen Post: Javascript: Domain Name ermitteln (JS: get domain name) via URL

Externe Links in neuem Fenster öffnen – quicky

/* Nicht vergessen das jQuery Framework vor diesem Snippet einzubinden  */
jQuery(document).ready(function() {
        jQuery("a[href^='http']:not([href^='"+window.location.host+"'])").attr('target', '_blank');
});

Diese Methode fügt allen a Tags mit einem http:// am Anfang des href Attributes das nicht der aktuellen Domain entspricht das target=“_blank“ hinzu. Nicht zu vergessen ist, das auch hier mit Hilfe des Selektors aus einzelne Bereiche des HTML Dokuments angesprochen werden können. Dieser Vorgehensweise fehlt es leider an Erweiterbarkeit. Insbesondere für Filter Regeln zur die Auswahl der Links.

5 Kommentare »
 

(to the english part of the post)
Dir wird in diesem Artikel der neue jQuery Interfaces Fisheye position: fixed; Patch zum herunterladen angeboten. Mit diesem Bugfix funktioniert das Fisheye auch nach dem Scrollen bei fixer Positionierung. Die Vorgehensweise ist denkbar einfach. Es muss nur der Bugfix nach der jQuery interfaces Datei eingebunden werden. Ein Beispiel folgt.

<script type="text/javascript" src="jquery.js"></script> <!--- jQuery Framework einbinden --->
<script type="text/javascript" src="interface.js"></script> <!--- jQuery interfaces Plugin einbinden --->
<script type="text/javascript" src="fisheye_patched.js"></script> <!--- hier den Bugfix einbinden --->

Fisheye position: fixed; Bugfix herunterladen

Zip Datei enthält Javascript Datei.

Weitere Verweise zum Thema:


(Zum deutschen Teil des Artikels)

In this post you will be offered to download the jQuery Interfaces Fisheye position: fixed; patch. With this patch the Fisheye works after scrolling while it’s fixed positioned. The procedure is simple. You only need to include the bugfix after including the jQuery inferfaces file. An example follows.

<script type="text/javascript" src="jquery.js"></script> <!--- include jQuery Framework --->
<script type="text/javascript" src="interface.js"></script> <!--- include jQuery interfaces plugin --->
<script type="text/javascript" src="fisheye_patched.js"></script> <!---include the bugfix --->

Fisheye position: fixed; bugfix download

Zip file includes javascript file.

More links to this subject:

31 Kommentare »
 

Ich stand vor kurzem vor dem Problem in Javascript zu prüfen ob ein DIV Element in einem HTML Dokument existiert. Mir stand aus vorangehender Entwicklung das jQuery Framework zur Verfügung. Dabei produzierte ich folgenden Code:

if ($('div#divname')) {
// Code ausführen, wenn DIV Element vorhanden. Funktioniert leider nicht
}

Das klappte leider nicht, da der Einsatz der jQuery Selektor Funktion immer ein Objekt zurückliefert. Mir war klar das es sich hierbei um ein leeres Objekt handelt und ich nur auf die Länge prüfen müsste. Sollte die Länge 0 sein ist der DIV im aktuellen Dokument nicht vorhanden. Hier nun der Code mit dem es entgültig klappte:

if ($('div#divname').length > 0) {
// Code ausführen, wenn DIV Element vorhanden. Funktioniert!
}

Ich verwende > anstatt ==, da diese Methode auch bei CSS Klassen funktioniert und keine Nachteile in der Performance bietet. Klassen können mehrfach im Dokument vorkommen. Deswegen kann die Länge größer als 1 sein.

Mehr zum Thema jQuery Selektoren

3 Kommentare »