Arquivo da categoria: Javascript

User Agent do Internet Explorer 11 muda e quebra um monte de projetos

internet-explorer-stopped-working
Fala galerinha…. Estou sumido a muito tempo aqui do blog… Vou tentar voltar a postar coisas… Serão posts curtos e objetivos, então qualquer dúvida pode me procurar nos comentários… (Preciso arrumar um tempo pra limpar esse layout horroso) :p :p

Hoje, após algumas reclamações de usuários, descobri que o IE 11 mudou seu user agent, e isso quebra vários javascripts.

Verifique o seu projeto e veja se não foi impactado.

Antes um user agent, por exemplo do IE 10 vinha assim:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)

Então no seu javascript, para verificar se o navegador era IE, você pega o user agent e procura pela string MSIE. Provavelmente era um código assim:
this.navigator.userAgent().match(/MSIE\s([\d]+)/);

Com o novo e belíssimo IE 11, além de bonito e rápido, ele não podia perder a reputação e continuar uma droga… O user agent mudou para:
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

Com isso seu belíssimo javascript retorna que você não está no IE e sua aplicação se comporta de forma completamente diferente.

Para resolver isso, após muita muita pesquisa, forums, stack overflows, confesso que vi soluções que davam vontade de chorar… Então resolvi juntar um pedacinho de cada, e cheguei na seguinte solução:

1
2
3
4
5
6
7
8
9
10
function isIE() {
 return (
  (this.navigator.appName() == 'Microsoft Internet Explorer') ||
  this.navigator.userAgent().match(/MSIE\s([\d]+)/) ||
  (
   (this.navigator.appName() == 'Netscape') &&
   (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(this.navigator.userAgent()) != null)
  )
 );
}

Assim eu consigo fazer 3 verificações antes de dizer que não é IE. Se o navegador se chama “Internet Explorer”, se ele tem uma versão válida de MSIE ou se ele é um Netscape com alguma versão de Trident.

Já estou rodando esse código em produção e o problema foi solucionado. Espero que sirva para mais alguém…

Share

HTML5: Trocando mensagens entre a página e iframes

Por questões de segurança e privacidade, os navegadores impedem que haja comunicação entre os conteúdo de diferentes domínios. Ou seja, scripts em diferentes dominios (cross-domain) não podem se interagir.

Na prática seria assim… Já imaginou, se um simples anúncio do google adsense, pudesse controlar a página em que ele foi colocado ? Ele iria alterar o background, trocar titulos na página e bagunçar tudo.

Por isso essa é uma importante funcionalidade nos navegadores, pois evita com que páginas desconhecidas (em domínio diferente) de controlar a página atual em que está visitando.

Com o HTML5, podemos contornar esse problema facilmente. Utilizando o Cross-document messaging, podemos estabelecer comunicação entre páginas e documentos no html, sem se procupar com a origem do domínio. Foi desenvolvido justamente para permitir essa comunicação, sem colocar em risco a segurança da página. (cross-site scripting attacks).

Cross-site messaging funciona apenas no HTML5, e está disponível nas seguintes versões de navegadores:

  • Internet Explorer 8.0+
  • Firefox 3.0+
  • Safari 4.0+
  • Google Chrome 1.0+
  • Opera 9.5+

Vejamos então um exemplo prático:

Digamos que em sua página inicial, você tem o seguinte iframe.

1
<iframe id="exemplo-iframe" src="http://www.exemplo.com/teste.html"></iframe>

Se você quiser mandar o titulo do seu site para o iframe, você precisa usar o cross-document messaging pois ele está em um outro domínio. Veja abaixo como você faria para disparar essa mensagem:

1
2
3
4
<script language="javascript">
var iframe = document.getElementById("exemplo-iframe").contentWindow;
iframe.postMessage("Titulo do Site", "*"); 
</script>

Na linha 2 é onde obtemos o controle do iframe. Na linha 3 é onde disparamos a mensagem. Note que estamos passando um “*” como segundo argumento do postMessage, o que significa que a mensagem é enviada para todos os domínios. Poderiamos ser mais específicos e disparar apenas para o domínio do iframe (exemplo.com).

Agora, no lado do iframe, só falta receber essa mensagem. Veja abaixo o exemplo do código que o iframe deve carregar:

1
2
3
4
5
6
7
8
<script language="javascript">
function displayMessage(event) {
    var message = event.data;
    alert(message);
    event.source.postMessage("Recebido com sucesso!",  "*");
}
window.addEventListener("message", displayMessage, false);
</script>

Vou começar explicando pela linha 7,  onde é estabelecido o listener, que é responsável por “escutar” as mensagens recebidas e chamar a função displayMessage. Na linha 3, recebemos a mensagem numa variável. Na linha 4 exibimos ela no alert do javascript. Na linha 5, é disparado uma mensagem para o “remetente”, ou seja, podemos enviar uma mensagem para confirmar o recebimento por exemplo.

Lembrando que para que a mensagem enviada na linha 5 seja recebida corretamente pela sua página inicial, você tem que adicionar um listener, da mesma forma que foi feito no iframe. Fazendo assim, é possível fazer trocas de informações entre as páginas de diferentes domínios.

No exemplo acima, qualquer site estaria habilitado em trocar informações com aquela página do iframe (http://www.exemplo.com/teste.html) e dependendo do contexto e de como foi implementado, pode vir a ser uma falha de segurança, portanto, utilize com cuidado.

Share

Feliz ano novo com javascript !

natal-16Primeiramente, gostaria de desejar a todos os leitores e amigos que acompanham meu blog:

Um feliz natal e um próspero ano novo !

Entrando nesse ritmo de natal e ano novo, desenvolvi um pequeno código em javascript para desejar feliz natal e ano novo para os leitores do meu blog.

O código está realmente simples, e pode ser alterado e utilizado aonde quiser… Só não esqueça de deixar sua opnião nos comentários abaixo!

O script funciona da seguinte maneira:
3 variáveis são definidas no inicio:
Data atual (var agora).
Data do ano novo (var anoNovo).
Data máxima de exibição (var anoNovoMax).

O alert com a mensagem será exibida enquanto a data atual estiver dentro do intervalo das outras 2 datas.

Abaixo segue o código:

<script language="JavaScript">
var agora = new Date();
var anoNovo = new Date(2010, 0, 1, 0, 0, 0, 0);
var anoNovoMax = new Date(2010, 0, 1, 23, 59, 59, 0);
if(agora >= anoNovo && agora<anoNovoMax)
{
alert("Feliz ano novo !");
}
</script>

Para implementar no wordpress, é bem simples:
Adicione um Widget de texto em seu wordpress, e sem atribuir um titulo, insira o codigo javascript diretamente no campo de baixo “descrição”. Fazendo isso, o widget não ficará visível, mas o código vai funcionar… 🙂

Para implementar em seu site:
Basta inserir o javascript em sua página.

Dica:
Como o javascript pega a data da máquina do cliente, você corre o risco de pegar a data errada.  Uma solução seria usar o PHP para definir a data, ou seja,  seria a data atual seu servidor. Exemplo:

var agora = new Date(<?php echo date("Y, m, d, H, i, s"); ?>);

Então é isso… Façam bom proveito !

Aqui no blog, já está implementado as mensagens de Feliz Natal e Feliz Ano Novo… Serão exibidas durante todo o dia 25 e 01, respectivamente ! Visitem o Blog e confiram ! 😉

 

Share