Inhalt:JS-PowerButton-Creator
Was ist ein JS-PowerButton?
Man kann sich im Browser Javascript-Bookmarks erstellen - soll heißen, als Ziel-URL des Bookmarks wird Javascript-Code eingegeben und dieser kann dann dazu genutzt werden, um die Seite z.B. nach allen enthaltenen Links zu durchsuchen und diese Ausgeben zu lassen. Ein weiteres Beispiel: über einen Klick auf das Bookmark alle auf der Seite enthaltenen Bilder anzeigen lassen bzw. den Pfad zu Selbigen. Man könnte auch die Daten direkt an ein anderes Skript übergeben o.ä. - da sind eine Menge durchaus sinnvolle Einsatzmöglichkeiten und der Fantasie keinen Grenzen gesetzt. Das ist jetzt auch nichts neues oder gar etwas, dass ich erfunden habe oder so, sondern einfach nur eine weitere Möglichkeit sich Arbeit zu erleichtern oder auch einfach nur um ein wenig Fun damit zu haben. Ich persönlich kenne zwar nicht wirklich viele Menschen, die mit dieser "Technik" arbeiten, aber eventuell liegt das nur an meinem Umfeld und es wird stärker genutzt als von mir gedacht.
Den Namen "JS-PowerButton" verwende ich seit ein paar Jahren schmunzelnd als Bezeichner, weil ich damit mal einen Kollegen sehr faszinieren konnte. Er hatte die Aufgabe (als nicht IT-Mensch) regelmäßig einen Seitenquellcode auszulesen, um dort Optionen einer Select-Box abzugreifen. Wenn man einen guten Editor hat und sich ein wenig auskennt - keine große Sache - aber der Kollege war, wie gesagt, halt kein IT-Mensch und machte es so, dass er jede Options-ID einzeln auswählte, kopierte, in eine Excel-Mappe übertrug und dann für den Optionstext das Gleiche noch einmal. Bei knapp 200 Einträgen, in einem nicht formatierten Quellcode-Fenster des Browsers, keine Arbeit die man gerne macht. Mit ein paar Zeilen wirklich simplen Javascript-Code als Bookmark konnte er den Task dann binnen 30 Sekunden erledigen. Seite aufrufen, Bookmark anklicken, Output komplett markieren und per Copy&Paste in die Excel-Mappe einfügen. Er sprach dann in einer Projektbesprechung immer von "Siggis Power-Button" und war so begeistert von der Lösung, dass sich der Name so eingebürgert hat.
OK, JS-Code - aber wofür den JS-PowerButton Creator?
Der Javascript-Code darf keinen Zeilenumbruch enthalten, da er sonst nicht in das Feld des Ziel-URLs eingefügt werden kann - also einfach eine kleine Bereinigung über das Formular durchzuführen um den Code einzeilig zu machen. Man kann alles normal eingerückt (oder auch nicht) coden und dann einfach den Code ins Formular pasten und umwandeln lassen. Das war es auch schon. So hat man seinen Sourcecode weiterhin gut administrierbar vorliegen und kann ihn bei Bedarf anpassen. Zwei kleine Besonderheiten: Ich achte immer darauf, dass jede Zeile Javascript-Code am Zeilenende ein Leerzeichen hat und man sollte keine Kommentare verwenden, die mit // eingeleitet werden, da sonst der komplette Rest des Codes, der nach dem Kommentar kommt, mit auskommentiert ist, logisch, oder?!
tl;dr Hier ein Beispielcode - einfach den kompletten Code markieren, kopieren, in das Textfeld einfügen und auf umwandeln klicken. Den nun umgewandelten einzeiligen Code markieren, kopieren und in ein neues Bookmark im Browser der Wahl einfügen. Dann irgendeine Webseite aufrufen und das Bookmark anklicken.
Beispiel: JS-Code um Links auszulesen
try
{
var regular_url_stream = '';
var ssl_url_stream = '';
var mail_url_stream = '';
var ftp_url_stream = '';
var javascript_url_stream = '';
var misc_url_stream = '';
var tag_type = 'a';
var max_tags = document.getElementsByTagName(tag_type).length;
var e = null;
var neue_id = '';
var div_styles = 'padding: 10px; border: 1px solid #000; margin-bottom: 15px;';
var strong_styles = 'display: block; margin-bottom: 15px; background-color: #EFEFEF; padding: 10px;';
for(var i = 0; i < max_tags; i++)
{
neue_id = 'myAId_' + i;
document.getElementsByTagName(tag_type)[i].id = neue_id;
if(document.getElementById(neue_id))
{
e = document.getElementById(neue_id);
if(!e.href)
continue;
if(e.href.match(/^http:/))
regular_url_stream += e.href + '<br />';
else if(e.href.match(/^https:/))
ssl_url_stream += e.href + '<br />';
else if(e.href.match(/^mailto:/))
mail_url_stream += e.href + '<br />';
else if(e.href.match(/^ftp:/))
ftp_url_stream += e.href + '<br />';
else if(e.href.match(/^javascript:/))
javascript_url_stream += e.href + '<br />';
else
misc_url_stream += e.href + '<br />';
}
}
document.open();
document.write('<html><head><title>Link-Finder</title></head><body style="font-family: Tahoma, Verdana, Arial;">');
if(regular_url_stream != '')
document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">Reguläre-Links:</strong>' + regular_url_stream + '</div>');
if(ssl_url_stream != '')
document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">SSL-Links:</strong>' + ssl_url_stream + '</div>');
if(internal_url_stream != '')
document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">interne Links:</strong>' + internal_url_stream + '</div>');
if(mail_url_stream != '')
document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">Mailto-Links:</strong>' + mail_url_stream + '</div>');
if(ftp_url_stream != '')
document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">FTP-Links:</strong>' + ftp_url_stream + '</div>');
if(javascript_url_stream != '')
document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">JS-Links:</strong>' + javascript_url_stream + '</div>');
if(misc_url_stream != '')
document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">sonstige Links:</strong>' + misc_url_stream + '</div>');
document.write('</body></html>');
document.close();
}
catch(e)
{
alert('..:: Fehler im Helferscript um Links auszulesen ::..' + e.message);
}
Fertige Bookmark-Codes
Hier sind nun ein paar Javascript-Codes die direkt per Copy&Paste übernommen und als Bookmark gesetzt werden können. Es sind nur ein paar einfache Beispiele, die aber imho gut die Einsatzmöglichkeiten aufzeigen. Wie bereits erwähnt: wenn sich jemand mit Javascript auskennt, kann man einiges damit realisieren. Man könnte klick-Events auslösen, man kann Input-Boxen nutzen, um an Usereingaben zu kommen etc. etc. etc. Ich hatte mal einen "PowerButton" erstellt, der zunächst nach der Zieluhrzeit gefragt und dann zu dem gewünschten Zeitpunkt einen Klick auf einen bestimmten, auf der Seite vorhandenen, Button durchgeführt hat - inklusive Neuladen der Seite, damit man nicht automatisch abgemeldet wird.
Alle Links anzeigen lassen (das Beispiel von oben)
javascript:try { var regular_url_stream = ''; var ssl_url_stream = ''; var mail_url_stream = ''; var ftp_url_stream = ''; var javascript_url_stream = ''; var misc_url_stream = ''; var tag_type = 'a'; var max_tags = document.getElementsByTagName(tag_type).length; var e = null; var neue_id = ''; var div_styles = 'padding: 10px; border: 1px solid #000; margin-bottom: 15px;'; var strong_styles = 'display: block; margin-bottom: 15px; background-color: #EFEFEF; padding: 10px;'; for(var i = 0; i < max_tags; i++) { neue_id = 'myAId_' + i; document.getElementsByTagName(tag_type)[i].id = neue_id; if(document.getElementById(neue_id)) { e = document.getElementById(neue_id); if(!e.href) continue; if(e.href.match(/^http:/)) regular_url_stream += e.href + '<br />'; else if(e.href.match(/^https:/)) ssl_url_stream += e.href + '<br />'; else if(e.href.match(/^mailto:/)) mail_url_stream += e.href + '<br />'; else if(e.href.match(/^ftp:/)) ftp_url_stream += e.href + '<br />'; else if(e.href.match(/^javascript:/)) javascript_url_stream += e.href + '<br />'; else misc_url_stream += e.href + '<br />'; } } document.open(); document.write('<html><head><title>Link-Finder</title></head><body style="font-family: Tahoma, Verdana, Arial;">'); if(regular_url_stream != '') document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">Reguläre-Links:</strong>' + regular_url_stream + '</div>'); if(ssl_url_stream != '') document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">SSL-Links:</strong>' + ssl_url_stream + '</div>'); if(internal_url_stream != '') document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">interne Links:</strong>' + internal_url_stream + '</div>'); if(mail_url_stream != '') document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">Mailto-Links:</strong>' + mail_url_stream + '</div>'); if(ftp_url_stream != '') document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">FTP-Links:</strong>' + ftp_url_stream + '</div>'); if(javascript_url_stream != '') document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">JS-Links:</strong>' + javascript_url_stream + '</div>'); if(misc_url_stream != '') document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">sonstige Links:</strong>' + misc_url_stream + '</div>'); document.write('</body></html>'); document.close(); } catch(e) { alert('..:: Fehler im Helferscript um Links auszulesen ::..' + e.message); }
Alle Bilder anzeigen lassen
javascript:try { var img_stream = ''; var tag_type = 'img';var max_tags = document.getElementsByTagName(tag_type).length; var e = null; var neue_id = ''; var div_styles = 'padding: 10px; border: 1px solid #000; margin-bottom: 15px;'; var strong_styles = 'display: block; margin-bottom: 15px; background-color: #EFEFEF; padding: 10px;'; for(var i = 0; i < max_tags; i++) { neue_id = 'myId_' + i; document.getElementsByTagName(tag_type)[i].id = neue_id; if(document.getElementById(neue_id)) { e = document.getElementById(neue_id); if(!e.src) continue; img_stream += '<img src="' + e.src + '" title="' + e.src + '"/><br />'; } } document.open(); document.write('<html><head><title>Image-Shower</title></head><body style="font-family: Tahoma, Verdana, Arial;">'); if(img_stream != '') document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">Bilder:</strong>' + img_stream + '</div>'); document.write('</body></html>'); document.close(); } catch(e) { alert('..:: Fehler im Helferscript um Bilder auszulesen ::..' + e.message); }
Alle Bilder-Pfade anzeigen lassen
javascript:try { var img_stream = ''; var tag_type = 'img'; var max_tags = document.getElementsByTagName(tag_type).length; var e = null; var neue_id = ''; var div_styles = 'padding: 10px; border: 1px solid #000; margin-bottom: 15px;'; var strong_styles = 'display: block; margin-bottom: 15px; background-color: #EFEFEF; padding: 10px;'; for(var i = 0; i < max_tags; i++) { neue_id = 'myId_' + i; document.getElementsByTagName(tag_type)[i].id = neue_id; if(document.getElementById(neue_id)) { e = document.getElementById(neue_id); if(!e.src) continue; img_stream += e.src + '<br />'; } } document.open(); document.write('<html><head><title>Image-URL-Finder</title></head><body style="font-family: Tahoma, Verdana, Arial;">'); if(img_stream != '') document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">Bilder:</strong>' + img_stream + '</div>'); document.write('</body></html>'); document.close(); } catch(e) { alert('..:: Fehler im Helferscript um Bilder-Pfade auszulesen ::..' + e.message); }
Alle Formularfelder anzeigen lassen
javascript:try { var stream = ''; var form_data_counter = 0; var div_styles = 'padding: 10px; border: 1px solid #000; margin-bottom: 15px;'; var strong_styles = 'display: block; margin-bottom: 15px; background-color: #EFEFEF; padding: 10px;'; if(document.forms[0]) { for(var f=0; f<document.forms.length; f++) { for(var e=0; e<document.forms[f].length; e++) { stream += '<div style="font-family: Arial; font-size: 10pt;">'; if(form_data_counter == f) { stream += '<h3 style="color: #FF0000; margin: 10px 0px 10px 0px;">' + (f + 1) +'. Formular</h3>'; stream += '<b>Name:</b> [' + document.forms[f].name + '] '; stream += '<b>Action:</b> [' + document.forms[f].action + '] '; stream += '<b>Method:</b> [' + document.forms[f].method + '] '; stream += '<br /><br />'; form_data_counter++; } stream += '<b style="color: #0000FF;">' + (e + 1) + '. Element</b> > '; stream += '<b>Name:</b> [' + document.forms[f].elements[e].name + '] '; stream += '<b>ID:</b> [' + document.forms[f].elements[e].id + '] '; stream += '<b>Typ:</b> [' + document.forms[f].elements[e].type + '] '; stream += '<b>Value:</b> [' + document.forms[f].elements[e].value + ']'; stream += '<br />'; } stream += '<hr style="margin: 20px 0px 20px 0px;" />'; } } else { stream = 'Keine Formularfelder gefunden'; } document.open(); document.write('<html><head><title>Formfield-Viewer</title></head><body style="font-family: Tahoma, Verdana, Arial;">'); if(stream != '') document.write('<div style="' + div_styles + '"><strong style="' + strong_styles + '">Formular-Felder:</strong>' + stream + '</div>'); document.write('</body></html>'); document.close(); } catch(e) { alert('..:: Fehler im Helferscript um Formularfelder auszulesen ::..' + e.message); }