Editez n’importe-quelle page web avec un petit bout de code

Etonnant.Vous allez sur n’importe-quelle page web, vous remplacez le contenu de la barre d’adresse par ce bout de code : javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0▶ Posez toutes vos questions sur le nouveau forum Presse-citron Et vous pouvez éditer et modifier la page (les pages en tableaux sont complètement déformables, les pages en CSS ne permettent que

Etonnant.
Vous allez sur n’importe-quelle page web, vous remplacez le contenu de la barre d’adresse par ce bout de code :

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Et vous pouvez éditer et modifier la page (les pages en tableaux sont complètement déformables, les pages en CSS ne permettent que la modification du texte).
Bien sûr vous ne pouvez pas enregistrer les modifications, mais ça je crois que l’aviez déjà compris.


Nos dernières vidéos

21 commentaires

  1. C’est de cette façon que marche la plupart des éditeurs WYSIWIG actuel, en mettant le designMode sur une iframe.

  2. C’est une fonction d’Opera à l’origine et c’est très utile quand il y a des erreurs dans le code.

  3. Dans le genre sympa en javascript y a <a href="javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=’absolute’; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval(‘A()’,50); void(0);">ceci</a>

  4. c peut être pas si inutile que cela,
    si tu monte un web pour un client, il peut apporter en live les changements de textes, redimmensionner ou replacer les éléments par contre, on peut pas enregistrer, c sur, mais peut-on exporter les modifs qqpart ? fichiers en pj ds un mail ou autre ?
    A++++

  5. > fred : très bonne remarque, on peut faire les modifs en live avec le client facilement et faire une capture d’écran. Génial.

  6. Moi je m’amuse depuis que je connais ce code, je passe mon après midi à changer les textes de site tel que "le monde" "google actualités"…en faisant des copies d’écran une fois un article plus ou moins subtilement modifié il y a de quoi se faire une belle revue de presse trafiquée. Héhéhé !

  7. Moi je trouve ca très pratique ne serait-ce que pour voir ce qui ne vas pas quand on construit sa propre page. Faire des essais "en direct". Mais c’est vrai que ca ne remplace pas un véritable éditeur WYSIWYG

  8. Super ce code ! Cela permet d’activer l’outil de correction ortographique de Firefox. Comme ça on peut facilement voir ou il a des fautes sur un site qu’on a mis en ligne 😉

  9. J’ai fait ça avec le site du Monde ! C’est génial : à la Une l’abbé Pierre n’était plus mort, mais il tirait son coup avec Angela Merkel ! Certains diront que c’est du mauvais goût, mais à son âge, on prend ce qui vient !

  10. Aargl! Malheureux, fallait pas me montrer ça, je sens que je vais passer un temps aussi bête que précieux à m’amuser avec cette astuce…
    Merci pour le truc, en tous cas 🙂

  11. Et comment fait on pour sortir du mode édition ?

    J’ai essayé :
    javascript:document.body.contentEditable=’false’; document.designMode=’off’; void 0

    mais ça ne semble pas fonctionner …

  12. bricedenice2929 on

    C’est sympa mais ça va aps plus loin que ça lol

    Morphy tu fais actualisé 😉

  13. Astuce : J’ai ajouté ce bout de code comme un Marque-Page de FireFox.

    Du coup, dès que je suis sur un site à modifier, j’ai juste à cliquer sur ce marque-page pour passer en mode édition.

  14. Bonjour à tous,

    je cherche comment je peux éditer le code html d’une carte météo pour la mettre sur mon blog (et qu’elle reste en temps réel)

    si quelqu’un peut m’aider! merci d’avance

    flo

Send this to a friend