QR-Code-Bookmarklet

23.10.2010, 22:51

Da ich seit einem Monat ein HTC Desire besitze, und es rege nutze, bin ich auf ein paar kleine Problemchen gestossen. Unter anderem will ich Websites bzw. Links schnell und einfach vom Notebook aufs Smartphone übertragen. Und dazu habe ich mir nun ein QR-Code-Bookmarklet geschrieben, womit ich mit einem Mausklick einen QR-Code im Browser generieren und diesen dann mit dem Desire scannen und die Website aufrufen kann. Eine Sache von 3 Sekunden.

Der JavaScript-Code für das Bookmarklet sieht wie folgt aus:
javascript:
QRbg=document.createElement("div");QRbg.setAttribute("id","QRbg");
QRbg.style.position="fixed";QRbg.style.top="0";QRbg.style.right="0";QRbg.style.bottom="0";
QRbg.style.left="0";QRbg.style.background="rgba(0,0,0,.6)";QRbg.style.zIndex="8765";
QRim=document.createElement("img");QRim.setAttribute("id","QRim");
QRim.setAttribute("alt","Loading%20QR-Code..");QRim.setAttribute("src",
"http://chart.apis.google.com/chart?cht=qr&chs=250x250&choe=UTF-8&chl="+encodeURIComponent(window.location.href));
QRim.style.position="fixed";QRim.style.top="50%";QRim.style.left="50%";
QRim.style.margin="-125px";QRim.style.width="250px";QRim.style.height="250px";
QRim.style.border="0";QRim.style.cursor="pointer";QRim.style.zIndex="8766";
QRim.onclick=function(){document.body.removeChild(document.getElementById("QRim"));
document.body.removeChild(document.getElementById("QRbg"));};
document.body.appendChild(QRbg);document.body.appendChild(QRim);
void(0);
Um ein Bookmarklet zu erstellen, erstellt man ein normales Lesezeichen im Browser und fügt statt einer URL den JavaScript-Code ein.
Dieses Bookmarklet kann man dann beispielsweise in der Lesezeichen-Symbolleiste speichern und mit einem Klick aufrufen.

Diese Funktion dunkelt die Webseite ab und zeigt mittig zentriert den QR-Code an. Mit einem Klick auf den QR-Code kann man ihn wieder zum Verschwinden bringen.

Für die Darstellung des QR-Codes wird auf die Google-Chart-Api zurückgegriffen.
 


Andere Einträge