Script jQuery popunder: ecco come realizzarlo

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

[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]

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

[donationdownloads id=”13″]

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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

creativity-day-2014
Up Next:

Creativity Day 2014: evento dedicato a startup e creatività

Creativity Day 2014: evento dedicato a startup e creatività