Vous savez maintenant vous servir des bookmarklets (c'était dur hein
). Nous allons donc nous pencher sur certains exemples concrets.
Si aucun exemple ne vous intéresse, sachez que si vous avez de bonnes connaissances en JavaScript (hors bookmarklets), ils ne vous apprendront rien (ou presque rien).
Désactiver un anti-clic droit
Il nous fait savoir comment les sites font pour désactiver le clic droit.
Il existe deux méthodes :
- Mettre une fonction contenant un return false;
au oncontextmenu de l'élément window
ou de document.body
- Mettre une fonction qui fait return false;
au onclick (après avoir vérifié que c'était un clic droit) de l'élément window
ou de document.body
Pour information, un
return false
, lorsqu'il est renvoyé par une fonction associée à un évènement, il annule l'évènement.
Ainsi,
<a href="http://www.google.fr" onclick="return false;">Google</a>
n'enverra jamais celui qui clic dessus sur Google si il a activé le JavaScript.
Il nous faut donc empêcher ces retours (et donc enlever ces fonctions) associés à ces évènements.
On peut remplacer ces fonctions par :
- des fonctions vides (qu'on peut faire anonyme au passage) : function(){}
- le mot clef undefined
Nous pouvons donc faire :
Code : JavaScript | window.oncontextmenu = undefined; //ou function(){}
window.onclick = undefined; //ou function(){}
document.body.onclick = undefined; //ou function(){}
document.body.oncontextmenu = undefined; //ou function(){}
|
Or comme
a = b = 1;alert("a:"+a+" b:"+b);//a:1 b:1
, on peut faire :
Code : JavaScript | window.oncontextmenu = window.onclick = document.body.onclick = document.body.oncontextmenu = undefined; //ou function(){}
|
On va stocker
document.body
dans
b
et
window
dans
w
, ce qui nous permettra de ne les écrire qu'une fois (et dans dans le cas de
document.body
, d'éviter de rechercher
body
dans
document
à chaque fois).
On a donc ce bookmarklet :
Code : JavaScript | javascript:(function(){var w=window,b=document.body;w.onclick=w.oncontextmenu=b.onclick=b.oncontextmenu=function(){}})();
|
Afficher le code HTML généré par le javascript d'une page
Pour afficher du code, le plus simple est (à l'heure où j'écris ce tutoriel) de le mettre dans un textarea.
C'est donc ce que nous allons faire.
On va faire en sorte que le
innerHTML
du corps de la page (
document.body
) soit entouré par
<textarea>
et
</textarea>
.
On fait donc :
javascript:document.body.innerHTML='<textarea>'+document.body.innerHTML+'</textarea>'
Mais là, le code est affiché dans un textarea minuscule.
On va donc lui mettre un attribut
style
et écrire dedans que la largeur et la hauteur sont égales à 100% de celles de l'élément parent :
javascript:document.body.innerHTML='<textarea style="width:100%;height:100%;">'+document.body.innerHTML+'</textarea>'
Et voilà le tour est joué
Vider son pense-bête
Si vous tenez à ce que contient votre pense-bête, pensez à sauvegarder son contenu quelque part, car on ne va pas seulement vider le pense-bête sur la page actuelle, mais bien dans la BDD du SdZ !
Vous avez sans doute souvent plein de choses qui datent dans votre pense-bête sur le SdZ...
Et vous avez la flemme d'aller l'éditer...
Eh bien vous pouvez le vider avec un "simple" bookmarklet.
Tout d'abord, étudions le code qui permet au SdZ de proposer l'édition du pense-bête sans recharger la page :
Code : JavaScript | $("#menu_notepad h5 a").click(function(f){var h="<p class=\'centre\'><img src=\'Templates/images/designs/2/loading.gif\' /></p>";f.preventDefault();$.post("ajax.php?do=xml_edit_notepad",{to_unparse:$.trim($("#text_notepad").html())},function(j){f.preventDefault();$("#text_notepad").html('<textarea id="text_notepad_modify" onblur="'+g+'">'+j+"</textarea>");$("#text_notepad_modify").focus()});var e="$.trim($('#text_notepad_modify').val())";var g="event.preventDefault();$.post('ajax.php?do=xml_edit_notepad', {new_notepad:"+e+"}, function(data2){$('#text_notepad').html(data2);});$('#text_notepad').html('"+h+"');"});
|
Et là, vous vous dites : "Cool, c'est bien parti
".
Ne vous inquiétez pas, ce n'est pas long d'indenter et d'arriver à un code lisible. Mais avant cela, nous allons vérifier que c'est bien ce code :
Code : JavaScript | javascript:$("#menu_notepad h5 a").click()
|
Eh oui, c'est bien le bon code
On indente donc :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 | $("#menu_notepad h5 a").click(//on définit le onclick
function(f){//c'est une fonction anonyme
var h="<p class=\'centre\'><img src=\'Templates/images/designs/2/loading.gif\' /></p>";//on définit le code HTML à mettre pendant le chargement
f.preventDefault();//on évite que ça fasse des trucs implicites donc on a pas besoin
$.post(//on post qqch en ajax
"ajax.php?do=xml_edit_notepad", //l'url
{
to_unparse:$.trim($("#text_notepad").html())//les valeurs envoyées (à savoir le HTML de votre notepad qui va être déparsé puis qui vous sera renvoyé comme zcode)
},
function(j){//la fonction de callback :
f.preventDefault();//pareil, on évite les trucs par défaut qui peuvent nous emm*****
$("#text_notepad").html('<textarea id="text_notepad_modify" onblur="'+g+'">'+j+"</textarea>");//on met un textarea dans le notepad avec comme contenu le retour (le HTML déparssé et redevenu du zcode) et on met en onblur une fonction qui aura été définie [elle est plus bas dans le code])
$("#text_notepad_modify").focus()//on met le focus sur le notepad
}
);
var e="$.trim($('#text_notepad_modify').val())";//on vire les espaces en début et fin de ligne. (enfin on stocke ça dans une chaîne pour la rajoute r dans du HTML plus tard
//là, on a une giga chaîne... je la met en plusieurs ligne pour pouvoir détailler.
//mais en théorie, c'est une seule ligne. C'est ce qui est mis au onblur au textarea d'édition
var g="
event.preventDefault(); //tjrs pareil
$.post(//tjrs pareil
'ajax.php?do=xml_edit_notepad', //l'url
{new_notepad:"+e+"}, //les données envoyées
function(data2){ //la fonction callback
$('#text_notepad').html(data2); //qui met le retour dans le notepad
}
);
$('#text_notepad').html('"+h+"');//on met le code HTML du chargement en attendant le callback.
"
}
);
|
Bon... à ce stade-là, le code ne sert à rien...
On va donc changer quelques trucs.
Premièrement,
Code : JavaScript | $("#menu_notepad h5 a").click(
function(f){
|
ne nous sert à rien car on n'a pas besoin de rajouter le onclick mais d'effectuer directement la fonction donc on l'enlève.
Ensuite,
Code : JavaScript 4
5
6
7
8
9
10
11
12
13
14
15 | f.preventDefault();
$.post(
"ajax.php?do=xml_edit_notepad",
{
to_unparse:$.trim($("#text_notepad").html())
},
function(j){
f.preventDefault();
$("#text_notepad").html('<textarea id="text_notepad_modify" onblur="'+g+'">'+j+"</textarea>");
$("#text_notepad_modify").focus()
}
);
|
ne nous sert pas dans la mesure où on ne veut pas éditer mais simplement envoyer les données à modifier.
Enfin,
Code : JavaScript | var e="$.trim($('#text_notepad_modify').val())";
|
ne nous sert pas car on va envoyer une valeur vide...
Il est donc inutile d'enlever les espaces en début ou fin de ligne...
On va donc le supprimer et comme on ne veut pas insérer la valeur du
<textarea>
mais rien, on va remplacer la variable
e
par
''
(une chaîne vide).
Il nous reste :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12 | var h="<p class=\'centre\'><img src=\'Templates/images/designs/2/loading.gif\' /></p>";
var g="
event.preventDefault();
$.post(
'ajax.php?do=xml_edit_notepad',
{new_notepad:"+''+"},
function(data2){
$('#text_notepad').html(data2);
}
);
$('#text_notepad').html('"+h+"');
"
|
Vu qu'on ne va pas y mettre directement dans du HTML, on va les sortir des variables et on va placer
h
(le HTML pour le chargement) à l'endroit où il était normalement ajouté par le biais de sa variable.
On n'oublie bien sûr pas de remplacer
{new_notepad:"+''+"},
par
{new_notepad:''},
.
On obtient :
Code : JavaScript | event.preventDefault();
$.post(
'ajax.php?do=xml_edit_notepad',
{new_notepad:''},
function(data2){
$('#text_notepad').html(data2);
}
);
$('#text_notepad').html('<p class="centre"><img src="Templates/images/designs/2/loading.gif" /></p>');
|
Le
event.preventDefault();
ne nous sert à rien donc on l'enlève :
Code : JavaScript | $.post(
'ajax.php?do=xml_edit_notepad',
{new_notepad:''},
function(data2){
$('#text_notepad').html(data2);
}
);
$('#text_notepad').html('<p class="centre"><img src="Templates/images/designs/2/loading.gif" /></p>');
|
On test... et là, magie, le pense-bête se vide !
On a cependant un problème : Si on laisse le pense-bête tel quel, il va disparaître à la prochaine réactualisation de la page.
On va donc remplacer la chaîne vide par une chaîne contenant un espace :
Code : JavaScript | $.post(
'ajax.php?do=xml_edit_notepad',
{new_notepad:' '},
function(data2){
$('#text_notepad').html(data2);
}
);
$('#text_notepad').html('<p class="centre"><img src="Templates/images/designs/2/loading.gif" /></p>');
|
Et voilà, vous pouvez vider votre pense-bête en un clic
(D'après mes calculs, vu le temps que vous avez mis à créer ce bookmarklet, si vous venez une fois par jour sur le SdZ et en vidant votre pense-bête en arrivant, ça deviendra rentable niveau temps si vous vivez encore plus de 100 ans
)
Les Bookmarklets ou comment modifier la page d'un site depuis la barre d'adresse
CapFlow
Trouvez une formation
Suggestions
Flux RSS News
Facebook
Google+