Oggi esamineremo una piccola utility JavaScript che permette ai visitatori di incollare rapidamente e facilmente l'indirizzo della pagina che stanno visitando negli appunti del lettore quando cliccano su un link (o un pulsante) specifico.
Questo permetterà ai visitatori del sito di incollare facilmente l'indirizzo dove preferiscono con una semplice combinazione di tasti CTRL+V. Questa utility può essere utilizzata per condividere manualmente l'indirizzo di un post a cui hanno messo "Mi piace" sui social media, spostarlo in un blocco note, aggiungerlo ai preferiti, ecc.
Dopo aver esaminato il codice di base, applicheremo alcune piccole modifiche per ottenere effetti aggiuntivi. Infine, vi mostrerò come organizzare il codice per aggiungerlo alla raccolta di pulsanti social leggeri che abbiamo spiegato in precedenza.
Codice base
Il codice di base è una funzione che aggiunge un nuovo elemento di input alla pagina e lo popola con i dati dell'indirizzo acquisiti tramite window.location.href . Quindi seleziona il contenuto, lo copia negli appunti e infine elimina l' input creato in modo che non sia visibile.
Una volta impostata la funzione, che ho chiamato getlink() , non resta che creare un pulsante che esegua la funzione quando viene cliccato. Nel complesso
, il risultato sarebbe simile a questo, anche se, se verrà utilizzato frequentemente, è meglio inserire la parte JavaScript in un template:
<a class="copi" href="javascript:getlink();">Copia URL</a>
<script>//<![CDATA[
function getlink() {
var aux = document.createElement("input");
aux.setAttribute("value",window.location.href);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
//]]></script>
E il risultato sarebbe questo. Se clicchi su quel link e lo incolli ovunque, apparirà l'indirizzo di questo post.
Copia URL
Aggiungere una classe ( copi nell'esempio ) non è obbligatorio, ma è comodo se in seguito vogliamo che quel semplice collegamento diventi un pulsante aggiungendo CSS.
.copi {
display: blocco;
larghezza: 120px;
margine: 0 self;
spaziatura: 10px;
colore: #ffffff;
sfondo: #990000;
allineamento testo: centro;
}
Un altro passaggio. Elimina alcuni elementi dell'indirizzo
La struttura di un URL è la seguente:
[protocollo] :// [ dominio ].[sottodominio] / [ percorso ]/[risorsa] ? [ stringa di ricerca ] # [hash ]
http://www.oloblogger.com/2010/02/generar-y-recuperar-cookies.html?m=1#c19290
Come puoi vedere, potrebbe contenere alcuni parametri che modificano leggermente la destinazione o addirittura puntano a una parte specifica del documento. Se non vogliamo che questi parametri siano condivisi, dovremmo aggiungere delle suddivisioni (evidenziazioni) per eliminare la stringa di ricerca e l'hash dai dati acquisiti (l'URL completo) (nello stesso ordine nell'esempio).
<a class="copi" href="javascript:getlink();">Copia URL</a>
<script>//<![CDATA[
function getlink() {
var aux = document.createElement("input");
aux.setAttribute("value",window.location.href .split('?')[0].split('#')[0] );
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
//]]></script>
Conferma all'utente che ha già il collegamento negli appunti
Per rendere il tutto più intuitivo e, soprattutto, per far sapere all'utente che le informazioni sono state trasferite negli appunti, perché non aggiungere un messaggio?
Il modo più semplice è aggiungere un avviso che genera una finestra pop-up. Lo aggiungeremmo alla fine, aggiungendo un messaggio di testo e l'indirizzo che è stato effettivamente copiato:
<a class="copi" href="javascript:getlink();">Copia e richiedi</a>
<script>//<![CDATA[
function getlink() {
var aux = document.createElement("input");
aux.setAttribute("value", window.location.href.split("?")[0].split("#")[0]);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
alert("URL copiato negli appunti\n\n" + window.location.href.split("?")[0].split("#")[0]);
}
//]]></script>
Tocco finale. Messaggio personalizzato che scompare dopo un po'.
Si tratta di rendere le cose più accattivanti. Quanto sopra fa il suo lavoro alla perfezione, ma le finestre JavaScript ci ricordano sempre quei fastidiosi pop-up indesiderati , quindi vediamo come crearne una che scompaia automaticamente dopo essere stata visualizzata abbastanza a lungo.
Per quanto riguarda il codice precedente, ovviamente eliminiamo la riga aggiunta in precedenza contenente l' avviso . Di nuovo, evidenzierò cosa è stato aggiunto per questo nuovo scopo, che non è altro che istruzioni per creare un nuovo nodo con il CSS per il messaggio e un altro con l'avviso vero e proprio. L'ultima riga serve a farlo scomparire dopo 2000 millisecondi, ovvero 2 secondi.
<a href='javascript:getlink();'>Copia URL</a>
<script>//<![CDATA[
function getlink() {
var aux = document.createElement("input");
aux.setAttribute("value", window.location.href.split("?")[0].split("#")[0]);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
var css = document.createElement("style");
var style = document.createTextNode("#notice {posizione: fissa; indice z: 9999999; larghezza: 120px; alto: 30%; sinistro: 50%; margine sinistro: -60px; imbottitura: 20px; sfondo: oro; raggio bordo: 8px; dimensione carattere: 14px; famiglia carattere: sans-serif;}");
css.appendChild(stile);
document.head.appendChild(css);
var notice = document.createElement("div");
notice.setAttribute("id", "notice");
var content = document.createTextNode("URL copiato");
notice.appendChild(contenuto);
document.body.appendChild(notice);
window.load = setTimeout("document.body.removeChild(notice)", 2000);
}
//]]></script>
Opzione: tutto il codice nel pulsante stesso
Infine, se vuoi aggiungere questo pulsante alla raccolta di pulsanti social leggeri senza dover aggiungere JavaScript separatamente, ma semplicemente aggiungerlo al link del pulsante come abbiamo fatto con gli altri, ecco cosa dovrai usare... in esclusiva.
Con un avviso di base .
<!-- Copia -->
<div class='copi'>
<a href='javascript:void();' onclick='var a=document.createElement("input");a.setAttribute("value",window.location.href.split("?")[0].split("# ")[0]),document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a);alert("URL copiato");'>Copia URL</a>
</div>
Con un avviso che scompare automaticamente
<!-- Copia -->
<div class='copi'>
<a href='javascript:void();' onclick='var a=document.createElement("input");a.setAttribute("value",window.location.href.split("?")[0].split("#")[0]),document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a);var c=document.createElement("style"),e=document.createTextNode("#av{position:fixed;z-index:999999;width:120px;top:30%;left:50%;margin-left:-60px;padding:20px;background:gold;border-radius:8px;font-size: 14px;font-family:sans-serif;text-align:center;}");c.appendChild(e),document.head.appendChild(c);var av=document.createElement("div");av.setAttribute("id","av");var c=document.createTextNode("URL copiato");av.appendChild(c),document.body.appendChild(av),window.load=setTimeout("document.body.removeChild(av)",2e3);'>Copia URL</a>
</div>
Per esercitarti puoi usare questo CodePen .
Jorge MG richiama la mia attenzione sull'inutilità del codice per alcuni browser, come Firefox. Beh, lo dice in modo più educato, ma la verità è che non funziona in tutti i casi.
Seguendo il suo suggerimento, ho modificato il codice, e questo sarebbe sicuramente quello da usare al posto di quello sotto la voce "Final Touch...".
Si noti che il collegamento al pulsante non ha più istruzioni JavaScript e, al suo posto, un addEventListener , associato a un clic sul pulsante ( mouseup ), rileverà se è stato cliccato e avvierà la routine. Questo modo di ordinare l'inizio è ciò che permette al resto del codice di funzionare in Firefox e in altri.
Inoltre, la funzione "copy" viene ora eseguita all'interno di un try , per rilevare l'eventualità che il sistema non funzioni nel browser e avvisare. Il resto è praticamente lo stesso, ma con un'inclusione CSS leggermente più breve per l'avviso.
<a class='copi' id='getlink' href='javascript:void();'>Copia URL</a>
<script>//<![CDATA[
var button = document.getElementById('getlink');
button.addEventListener('clic', function(e) {
if(button.id == 'getlink'){
var aux = document.createElement('input');
aux.setAttribute('valore', window.location.href.split('?')[0].split('#')[0]);
document.body.appendChild(aux);
aux.select();
try {
document.execCommand('copia');
var notice = document.createElement('div');
notice.setAttribute('id', 'avviso');
notice.style.cssText = 'posizione: fissa: oro; raggio del bordo: 8px; famiglia di caratteri: sans-serif;';
notice.innerHTML = 'URL copiato';
document.body.appendChild(notice);
document.load = setTimeout('document.body.removeChild(notice)', 2000);
document.load = setTimeout('button.id = "getlink"',2500);
button.id = '';
} catch (e) {
alert('Il tuo browser non supporta la funzione di copia');
}
document.body.removeChild(aux);
}
});
//]]></script>
Ora puoi provarlo anche da Firefox e il pulsante funzionerà correttamente.
Copia, avvisa e sbiadisci
Crossbrowser
Per "tutto il codice all'interno del pulsante stesso", ora sarebbe esattamente lo stesso di prima, fatta eccezione per gli spazi e le interruzioni di riga non necessari per renderlo più piccolo.
Il nuovo Codepen è http://codepen.io/oloman/pen/WGkrWp
Commenti
Posta un commento