quinta-feira, 28 de abril de 2011

Dica: Travessuras javascript com páginas web

Usar javascript com páginas web já é um assunto bastante antigo. Scripts como Greasemonkey e userscripts são comuns hoje em dia. No entanto, a idéia é mostrar um script que pode ser realmente útil, ao contrário de tantos outros disponíveis na internet.

Claro que o pessoal do HTML5 Demos dá um uso mais avançado, usando LocalStorage para persistir as mudanças, mas aki a idéia é mais simples.

A idéia é usar uma simples linha javascript que permite que o conteúdo da página possa ser editado localmente, usando comandos simples como copiar e colar entre páginas (ou mesmo aplicativos) e apagar e editar texto. O script é mínimo e você pode conferir abaixo:

javascript:void(document.body.contentEditable=(document.body.contentEditable!='true'))

Esse script deve ser executado na barra de endereços, depois que o site está devidamente carregado.

Esse código deriva de um outro, mais conhecido na internet, que somente habilita o modo de edição, também alterando flags no navegador:

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

A grande diferença entre usar designMode ou contentEditable é que o primeiro permite a alteração de qualquer elemento da página, enquanto o contentEditable pode ser usado para "editar" containers específicos.

O que esse código faz é habilitar e desabilitar a opção de edição do código fonte da página localmente. Recurso bem interessante para você que quer discutir um layout com algum cliente e fazer algumas alterações simples. Definitivamente uma mão na roda para demonstrações!

Claro que isso pode ser feito com recursos como o Firebug no Firefox ou com a opção "Inspecionar Elemento" do Chrome. Mas aki a idéia é tornar as coisas simples, WYSIWYG!

Fontes:

HTML5 Demos: Content Editable

Cut-and-paste one line of code to make any website editable
Differences Between DesignMode And ContentEditable
Converting an app using document.designMode from IE to Mozilla