Script jQuery popunder: ecco come realizzarlo

Nell’articolo di oggi vediamo come realizzare un semplice script jquery popunder utile per aprire pubblicità. Disponibile in due versioni: load e click.

Il popunder è una tecnica molto invasiva per aprire altre pagine forzatamente. E’ molto spesso usato in ambito pubblicitario per veicolare determinate campagne. Di fatto consiste nell’apertura di una nuova pagina sopra il sito che si sta visualizzando. Ho pensato di scrivere questo articolo – nonostante io stesso ritenga questa procedura da evitare – solo per ragioni di studio e di possibili considerazioni che leggerete a fondo articolo. Questo non vieta che possa aiutare coloro che stanno cercando questo tipo di soluzione per il proprio sito.

[button link=”http://www.targetweb.it/tutorial/2014/popunder/index.html” color=”blue” target=”blank” size=”large”]Demo autoload[/button] [button link=”http://www.targetweb.it/tutorial/2014/popunder/index-click.html” color=”blue” target=”blank” size=”large”]Demo Click[/button]

[lightgrey_box] NOTA: Usare solo se strettamente necessario, è una delle tecniche meno gradite e più invasive del web. [/lightgrey_box]

Apertura automatica al load della pagina

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script type="text/javascript">
  $(function() {

    var url = "http://www.targetweb.it/";
    var width = $(window).width();
    var height = $(window).height();
    window.open(url, "s", "width="+width+", height= "+height+", left=0, top=0, resizable=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no").blur();
    window.focus();

  });//DOM
 </script>

Come vedete il funzionamento dello script è molto semplice:

Mettendo lo script all’interno del DOM facciamo eseguire il tutto al load della pagina
Per prima cosa andiamo a definire le variabili url,width e height. Per la larghezza e altezza andiamo a prendere i valori della finestra dell’utente (pertanto il popup sarà dimensionato automaticamente).
Grazie alla funzione javascript window.open andiamo ad aprire l’url impostato alle dimensioni definite dalle variabili precedenti. Aggiungiamo anche alcuni parametri utili.
Con window.focus() andiamo a mettere in primo piano il popup davanti alla pagina che l’utente stava visualizzando.

Apertura selettiva al click

 <a href="#" class="click"><p>Click</p></a>

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script type="text/javascript">
  $(function() {

    $(".click").click(
    function(){

    var url = "http://www.targetweb.it/";
    var width = $(window).width();
    var height = $(window).height();
    window.open(url, "s", "width="+width+", height= "+height+", left=0, top=0, resizable=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no").blur();
    window.focus();

    });//click

  });//DOM
 </script>

In questa versione lo script è identico solo che viene elaborato al click su un determinato selettore jQuery (nel nostro esempio .click).

Conclusioni

Con gli oppurtuni adattamenti lo script può essere facilmente modificato a seconda delle vostre esigenze, ad esempio per aprire comunicazioni importanti per i vostri visitatori (anche se per questo continuo a consigliare questa soluzione).

Download tramite condivisione

[viral-download file1=”http://www.targetweb.it/download/2014/Popunder-Targetweb.zip” name1=”Scarica lo script!” url=”http://www.targetweb.it/script-jquery-popunder-ecco-come-realizzarlo/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#jQuery popunder script” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]

Download tramite donazione

Donazione libera con importo minimo di 1€ - Riceverai una mail con un link dove scaricare lo zip, il link è attivo per 2 giorni dalla data di donazione.

▼

Continue

Hai altre soluzioni da condividere con noi? Scrivile nei commenti qui sotto o seguici sui social network!