Como exibir um formulário nas páginas de qualquer site usando um bookmarklet (como o Note no Google Reader)?

Question

No Google Reader, você pode usar um bookmarklet para “anotar” uma página que está visitando.Quando você pressiona o bookmarklet, um pequeno formulário do Google é exibido no topo da página atual.No formulário você pode inserir uma descrição, etc.Quando você pressiona Enviar, o formulário é enviado sozinho sem sair da página e, em seguida, desaparece.Em suma, uma experiência muito tranquila.

Obviamente tentei dar uma olhada em como isso é feito, mas as partes mais interessantes estão reduzidas e ilegíveis.Então...

Alguma idéia de como implementar algo assim (no lado do navegador)?Que problemas existem?Postagens de blog existentes descrevendo isso?

Answer 1

Aupajo tem razão.No entanto, irei indicar-lhe uma estrutura de bookmarklet que desenvolvi para o nosso site (www.iminta.com).

O próprio bookmarklet é o seguinte:

javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());document.body.appendChild(e)})())

Isso apenas injeta um novo script no documento que inclui este arquivo:

http://www.iminta.com/javascripts/new_bookmarklet.js

É importante observar que o bookmarklet cria um iframe, posiciona-o e adiciona eventos ao documento para permitir que o usuário faça coisas como pressionar Escape (para fechar a janela) ou rolar (para que permaneça visível).Ele também oculta elementos que não funcionam bem com o posicionamento z (flash, por exemplo).Por fim, facilita a comunicação com o javascript que está sendo executado no iframe.Dessa forma, você pode ter um botão Fechar no iframe que informa ao documento pai para remover o iframe.Esse tipo de coisa entre domínios é um pouco hackeado, mas é a única maneira (que eu vi) de fazer isso.

Não para os fracos de coração;se você não é bom em JavaScript, prepare-se para lutar.

Answer 2

Em um nível muito básico, ele usará createElement para criar os elementos a serem inseridos na página e appendChild ou insertBefore para inseri-los na página.

Answer 3

Você pode usar um bookmarklet simples para adicionar uma tag <script> que carrega um arquivo JavaScript externo que pode enviar os elementos necessários para o DOM e apresentar uma janela modal ao usuário.O formulário é enviado por meio de uma solicitação AJAX, é processado no servidor e retorna com sucesso ou uma lista de erros que o usuário precisa corrigir.

Então o bookmarklet ficaria assim:

javascript: código para adicionar tag de script e iniciar o script;

O script externo incluiria:

• A capacidade de adicionar um elemento ao DOM
• A capacidade de atualizar o innerHTML desse elemento para ser a marcação que você deseja exibir para o usuário
• Tratamento para processamento de formulário AJAX

O efeito de janela pode ser obtido com posicionamento CSS.

Quanto a um recurso completo para esta tarefa específica, você teria muita sorte se encontrasse alguma coisa.Mas dê uma olhada nas partes menores e individuais e você encontrará muitos recursos.Dê uma olhada em informações sobre janelas modais, adição de elementos ao DOM e processamento AJAX.