Johannes Thönes

Software-Developer, ThoughtWorker, Permanent Journeyman, Ruby Enthusiast, Java and Devils Advocate.

Print-Version Anzeigen Mit Greasemonkey Und JQuery

Ich habe in letzter Zeit viel mit JQuery gearbeitet und als erste Javascript-Bibliothek habe ich bei JQuery das Gefühl, dass man richtig schönen Code schreiben kann.

Nun trug es sich aber zu (;-)), dass heise.de sein Design geändert hat. Mich hat deren Design schon vorhher immer genervt, wenn ich aus meinem RSS-Reader auf die einzelnen Artikel bin. Aber jetzt war definitiv die Schmerzensgrenze überschritten. Um nicht alle Elemente nachstylen zu müssen (was ja auch sehr fragil ist, da die ids und classes ja jederzeit geändert werden können), habe ich mir überlegt, das ich erstmal die Styles der Printversion nehme. Das ging erstaunlich einfach:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Erstmal JQuery ins Dokument einführen
// Der Code zum einbinden von JQuer ist ist von:
// http://www.joanpiedra.com/jquery/greasemonkey/ und ist unter MIT-Lizenz gestellt
// Kommentare sind angepasst.
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Warten bis JQuery nachgeladen ist
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();

// Das normale Greasemonkey Skript, nur jetzt mit JQuery
function letsJQuery() {
// Lösche alle Stylesheets die nicht media=print sind
$('link[rel=stylesheet]').not('[media=print]').remove();
// Ändere das media von print auf screen
$('link[rel=stylesheet]').filter('[media=print]').attr('media', 'screen');
}

Ich habe das Skript speziell für heise.de noch etwas erweitert … wen das interessiert, der möge mich ansprechen.