3

Como todos sabem, existem bloqueadores de popups que não deixam abrir popups automaticamente ou o próprio navegador, sem realizar alguma ação.

Dessa maneira, eu preciso criar um código em JAVASCRIPT, que abra meu popup desejado tão logo o usuário clique na tela.

Ou seja, eu preciso que todas minhas páginas, tenha algum código javascript (injection), que apresente o conteúdo normal ao usuário, mas qualquer clique na tela que ele fizer, é acionado um popup usando o método onclick, e o link que o usuário clicou também deve ser aberto na página atual.

Dessa maneira, usando o método onclick, será possivel abrir o popup de qualquer jeito.

Aguardo ajuda. Obrigado.

4
  • Fábio, bem vindo ao Stackoverflow! Estás a referir-te a uma janela nova, um dialog na página ou a janela do alert nativa?
    – Sergio
    30/12/2014 às 21:14
  • 1
    Talvez com jquery você consiga algo como $(document).on("click", function() { window.open("stackoverflow.com");}); 3/01/2015 às 5:32
  • Espere é clicar em qualquer lugar ou apenas em links, por que você disse que "e o link que o usuário clicou também deve ser aberto na página atual", isto está um pouco confuso, edite a questão por favor e tente deixar mais claro o que você necessita. 3/01/2015 às 19:08
  • já pensou em usar o .dialog() do jQuery? 19/08/2015 às 14:42

3 Respostas 3

2

Apenas para complementar a resposta do @ooredroxoo, não há como passar por cima da política de segurança de popups, pois esta está no nível do OS/browser. Caso seu popup caia dentro das regras do bloqueador, não há, até onde sei, um modo de forçar que sua popup seja exibida, isso seria uma falha de segurança. Alguns fatores como o domínio da URL a ser aberta na popup influenciam na decisão do navegador de bloquear ou não a abertura do conteúdo.

A solução apresentada anteriormente funciona bem, mas depende do jQuery. Caso prefira a solução sem dependências, uma linha é suficiente:

document.addEventListener('click', window.open.bind(window, 'http://coinbase.com'));

Mas tenha em mente que a solução utilizando jQuery tem como vantagem as correções crossbrowser.

Demo: http://plnkr.co/edit/KSkJ9cwrKmTKgNx6GkoJ?p=preview

0

Como o Marcelo comentou você pode usando o jQuery adicionar um listener a todos os elementos da página, desta forma não importa qual elemento ele clique será aberto um popup, algo como:

$(document).on("click", function() { window.open("urlDoPopup");});

Neste caso o on click não remove o comportamento padrão de links o que faz com que os links ainda abram páginas. Para remover o comportamento padrão (abrir o link na página) é necessário invocar o preventDefault, já que esse não é o interesse isso não foi adicionado ao código abaixo.

Outra coisa que pode fazer é dentro do $(document).ready colocar uma variável de controle para que não abra o popup mais de uma vez, caso o primeiro clique não tenha sido em um link.

Um código mais o menos assim.

$(document).ready(function (){
    var $popupaberto = false;
    $(document).click(function () {
        if (!$popupaberto) {
            window.open('URLDOPOPUP');
            $popupaberto = true;
        }
    });
    // Resto do javascript que você vai executar dentro deste evento...
});

Eu usei o .click ao invés do .on ou .bind para brevidade da resposta, mas ambos poderiam ser usados também.

O window.open faz parte da API nativa do navegador, que permite interagir com a Janela e deve funcionar na maior parte dos navegadores.

Em relação a bloqueadores de popup você deve tomar cuidado, muitos vão procurar por eventos como este, com a intenção de evitar que janelas sejam abertas sem que sejam por ação do usuário.

2
  • Uma dica: Não seria mais lógico adicionar ao $(document).click(function () { ao invés de $('*').click(function () {? 3/01/2015 às 19:03
  • Sim, de fato, havia colocado o $('*') para explicitar que seriam todos os elementos, mas o $(document) é melhor. Atualizei minha resposta.
    – ooredroxoo
    3/01/2015 às 19:23
0

uma alternativa é adicionar um layer bloqueando toda a pagina, uma vez que ela seja clickado, o popup será aberto e o layer removido.

var createPopupTrigger = function (url, width, height, autoOpen, beforeClose) {
  var popupLayer = document.createElement("div");
  popupLayer.style.position = "fixed";
  popupLayer.style.top = "0px";
  popupLayer.style.right = "0px";
  popupLayer.style.bottom = "0px";
  popupLayer.style.left = "0px";

  var popupOpen = function () {
    popupLayer.removeEventListener("click", popupOpen);
    
    var popup = window.open(url, "", "width=" + width + ", height=" + height);
    if(!popup || popup.closed || typeof popup.closed == 'undefined') 
    { 
      //popup.caller = window;
      createDialog(popupLayer, url, width, height, beforeClose);
    }
    else
    {
      document.body.removeChild(popupLayer);
      if (typeof beforeClose === "function") {
        beforeClose();
      }
    }
  };
  
  popupLayer.addEventListener("click", popupOpen);
  if (autoOpen) {
    popupOpen();
  }
  document.body.appendChild(popupLayer);
}

var createDialog = function (popupLayer, url, width, height, beforeClose) {
  popupLayer.style.backgroundColor = "rgba(0, 0, 0, 0.2)";
  var dialog = document.createElement("div");
  dialog.style.display = "none";
  dialog.style.backgroundColor = "white";
  dialog.style.position = "absolute";
  dialog.style.margin = "auto";            
  dialog.style.borderRadius = "5px";
  dialog.style.top = "0px";
  dialog.style.right = "0px";
  dialog.style.bottom = "0px";
  dialog.style.left = "0px";
  dialog.style.width = width + "px";
  dialog.style.height = height + "px";
  dialog.style.boxShadow = "0px 0px 10px black";
  dialog.style.overflow = "hidden";

  var conteudo = document.createElement("iframe");
  conteudo.style.padding = "0px";
  conteudo.style.border = "0px none transparent";
  conteudo.style.width = "100%";
  conteudo.style.height = "100%";

  var closeDialog = document.createElement("a")
  closeDialog.textContent = "×";
  closeDialog.style.fontFamily = "Helvetica";
  closeDialog.style.color = "#AAAAAA";
  closeDialog.style.cursor = "pointer";
  closeDialog.style.fontSize = "2.25rem";
  closeDialog.style.fontWeight = "bold";
  closeDialog.style.lineHeight = 1;
  closeDialog.style.position = "absolute";
  closeDialog.style.top = "0px";
  closeDialog.style.right = "8px";

  dialog.appendChild(conteudo);
  dialog.appendChild(closeDialog);            
  popupLayer.appendChild(dialog);

  conteudo.addEventListener("load", function () {
    //você pode tentar usar o codigo abaixo para acessar a pagina pai pela propriedade opener, isto pode ser util para simplificar algum script no popup.
    //conteudo.contentWindow.opener = window;
    dialog.style.display = null;
  });

  closeDialog.addEventListener("click", function (event) {
    document.body.removeChild(popupLayer);
    if (typeof beforeClose === "function") {
      beforeClose();
    }
  });

  conteudo.src = url;
}

createPopupTrigger("https://jsfiddle.net", 480, 360, false, null);

note que o stackoverflow.com bloqueia a abertura de popups dentro do snippet, que deve ser um comportamento semelhante a de um browser que bloqueie todos os popups, neste caso abrimos um dialogo modal.

você pode olhar o mesmo script neste jsfiddle, note que o mesmo não bloqueia o popup, então o mesmo abre normalmente.

caso possa, mova todos estes estilos que coloquei no javaScript para um arquivo css.

No que no exemplo acima, ele chama o createPopupTrigger assim que a pagina é carregada, porem caso deseje que aconteça apenas ao clicar em algum link da pagina, faça assim:

var links = document.querySelectorAll("a");
var onLinkClick = function (event) {
    var linkURL = this.href;
    createPopupTrigger("https://jsfiddle.net", 480, 360, true, function () {
        window.location.url = linkURL
    });

    event.preventDefault();
    event.stopPropagation();
}

links = [].slice.apply(links);
links.forEach(function (link) {
    link.addEventListener("click", onLinkClick);
});

desta forma, se o browser bloquear o popup, o dialogo irá abrir e ele será redirecionado apenas quando o dialogo for fechado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .