jquery.iframetracker Does not work on Mozilla Firefox, can you fix it?

Asked

Viewed 207 times

7

i have a script that records a cookie with ajax when you click on a Google ad (iframe), works in Google Chrome good.. but not firefox.. does anyone know why ? Or if you have another solution to do the same thing that I am wanting to do...

<?php
	$url = parse_url($_SERVER["HTTP_REFERER"]);
	parse_str($url["query"],$queryString);
  //setcookie("novo_ads","sim", time() + 172800,  $path = "/"); // 86400 = 1 dia, 172800 = 2 dias (SEGUNDOS)
?>
<style media="screen">
  body {
    background: rgb(218,234,237); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(218,234,237,1) 0%, rgba(252,248,231,1) 44%, rgba(237,247,228,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(218,234,237,1) 0%,rgba(252,248,231,1) 44%,rgba(237,247,228,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(218,234,237,1) 0%,rgba(252,248,231,1) 44%,rgba(237,247,228,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#daeaed', endColorstr='#edf7e4',GradientType=0 ); /* IE6-9 */
    background-repeat: no-repeat;
    background-size: 100% 100% !important;
    background-attachment: fixed;
    font-family: 'Roboto', sans-serif;
    font-weight: normal !important;
    font-size: 15px !important;
    min-height: auto !important;
    color: #000000bf !important;
  }
  @media (max-width: 640px) {
    .container {
        width: 100% !important;
    }
  }
</style>

<?php if (!isset($_COOKIE['novo_ads'])): ?>
  <!DOCTYPE html>
  <html lang="pt-br">
    <head>
      <!-- Meta tags Obrigatórias -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="application/javascript"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.iframetracker/1.1.0/jquery.iframetracker.js" type="application/javascript"></script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    </head>
    <body>
      <!-- HTML -->
      <div class="container">
        <div class="row">
          <div class="epaco" style="margin: 20px;"></div>
          <div class="col-md-12">
            <div class="alert alert-dark" role="alert">
              <center>
                <h2 style="font-weight: bold;"><i class="fas fa-lock"></i> DOWNLOAD BLOQUEADO <i class="fas fa-lock"></i></h2>
              </center>
            </div>

            <div class="alert alert-secondary" role="alert">
              <center>
                Clique em um dos anúncios abaixo e <b>aguarde 20 segundos na pagina do anunciante</b> para liberar, e depois clique no botão no final da pagina.<br>
                <b>TUTORIAL</b>: Caso ainda não esteja dando conta de passar por essa etapa, <a href="#" target="_blank">clique aqui</a> para ver um vídeo com passo a passo de como passar.
              </center>
            </div>
          </div>
          <div class="col-md-4">
            <div class="anuncio">
              <center>
                ADS GOOGLE
              </center>
            </div>
          </div>
          <div class="col-md-4">
            <div class="anuncio">
              <center>
                ADS GOOGLE
              </center>
            </div>
          </div>
          <div class="col-md-4" style="margin-bottom: 30px;">
            <div class="anuncio">
              <center>
                ADS GOOGLE
              </center>
            </div>
          </div>
          <div class="col-md-12">
            <div class="alert alert-dark" role="alert">
              <center>
                Caso tenha feito todo passo a passo acima, agora e só clicar no botão abaixo para liberar seu download.<br>
                <a href="#"><button type="button" class="btn btn-secondary"><i class="fas fa-lock-open"></i> LIBERAR DOWNLOAD</button></a>
              </center>
            </div>
          </div>
        </div>
      </div>
      <!-- SCRIPTS -->
      <script type="text/javascript">
      jQuery.noConflict();
      jQuery(document).ready(function(){
          interval_id = window.setInterval(function() {
          // verifica que o iframe existe ou ja foi carregado
          if( jQuery('.anuncio iframe').length > 0 ) {
              jQuery('.anuncio iframe').iframeTracker({
                  blurCallback: function(){
                      $.ajax({
                         method: "POST",
                         url: "https://uploadbr.onlinee.top/noticias/gravacookieclique.php",
                         data: { gravaCookieclique: "sim"}
                      });
                      console.log('consegui');
                  }
              });
              // limpa intervalo
              clearInterval(interval_id);
              }
          },500);
      });
      </script>

      <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
  </html>
<?php else: ?>
  <!DOCTYPE html>
  <html lang="pt-br">
    <head>
      <!-- Meta tags Obrigatórias -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="application/javascript"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.iframetracker/1.1.0/jquery.iframetracker.js" type="application/javascript"></script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    </head>
    <body>
      <!-- HTML -->
      <div class="container">
        <div class="row">
          <div class="epaco" style="margin: 20px;"></div>
          <div class="col-md-12">
            <div class="alert alert-success" role="alert">
              <center>
                <h2 style="font-weight: bold;">DOWNLOAD LIBERADO</h2>
              </center>
            </div>
            <div class="alert alert-secondary" role="alert">
              <center>
                Seu download foi liberado, caso não iniciei automaticamente <a href="#">clique aqui</a>.
              </center>
            </div>
          </div>
          <div class="col-md-12" style="margin-bottom: 30px;">
            <div class="ANUNCIOFINAL">
              <center>
                ADS GOOGLE
              </center>
            </div>
          </div>
          <div class="col-md-12">
            <div class="alert alert-secondary" role="alert">
              <center>
                Obrigado por deixar nosso site ainda melhor!
              </center>
            </div>
          </div>
        </div>
      </div>
      <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
  </html>
<?php endif; ?>


<script>
  window.setTimeout(function() {
	document.getElementsByClassName("loading")[0].style.display = 'none';
	document.getElementsByClassName("interface")[0].style.display = 'block';
	window.setTimeout(function() {
	if (document.getElementById("download-liberado").style.display != 'block') {
	   document.getElementById("download-bloqueado").style.display = 'block';
	}
	}, 30000);
	}, 5000);
</script>
<div class="homes" style="display: none !important;">

javascript html firefox

  • https://stackoverflow.com/questions/18373592/iframe-contents-cant-appear-in-firefox

  • Amigo, no and that does not appear... I want to know how to do the same function of this plugin in Mozilla.

  • Have you tried using this iframeTracker jQuery Plugin? https://github.com/vincepare/iframeTracker-jquery (I tested here and Mozilla is firing event-click iframe

  • Friend. And this one...

  • Just for conscience awakening. In your code the plugin is also loaded before jQuery? Why jQuery should be loaded before any plugin.

  • Yes! soh has jQuery on the page I use!

  • which version of firefox you are using, I tested here with version 63 and it was good, I could not play your error

  • Use the latest! However works a few times..

Show 3 more comments

1 answer

1

I made a modification in your code see if it works this way:

<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="application/javascript"></script>
<script src="/bower_components/jquery.iframetracker/jquery.iframetracker.js" type="application/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    interval_id = window.setInterval(function() {
    // verifica que o iframe existe ou ja foi carregado
    if( jQuery('.anuncio iframe').length > 0 ) {
        jQuery('.anuncio iframe').iframeTracker({
            blurCallback: function(){
                $.ajax({
                   method: "POST",
                   url: "gravacookieclique.php",
                   data: { gravaCookieclique: "sim"}
                });
                console.log('consegui');
            }
        });
        // limpa intervalo
        clearInterval(interval_id);
        }
    },500);
});
</script>

includes a console.log to print a msg when sending to your php

casonão work still use jquery as a function this way

<script type="text/javascript">
    jQuery.noConflict();
    (function($) {
        // You pass-in jQuery and then alias it with the $-sign
        // So your internal code doesn't change
    })(jQuery);
</script>

  • Mistake that happens to me: http://prntscr.com/lfue8t

  • I’ll edit the Cod.

  • No error appeared.. however the log did not work, I updated my complete code for you to see.. I use Bootstrap.

  • which version of jquery ta in your boostrap?

  • I put the newest of Bootstrap 4 However... nothing.. So I updated my code there, and even put the same link of your jquery, but still nothing..

Browser other questions tagged javascript html firefox

You are not signed in. Login or sign up in order to post.