Mini guida: visualizzare il codice sorgente delle pagine in Safari Mobile

Tutti i possessori di iDevice e che utilizzano Safari Mobile come browser, certamente sapranno che non è possibile visualizzare il codice sorgente delle pagine. In questa guida vedremo come aggiungere questa funzione, utilizzando un segnalibro e del codice javascript.

Icona Safari Mobile

Per prima cosa aprite Safari e caricate una pagina qualsiasi.

TecnologyBlog su Safari

Tappate sul tasto azione, il quadratino in basso al centro con la freccia che esce, e successivamente su “Aggiungi preferito”.

Azione Safari

Cancellate il contenuto del primo campo, scrivete “Visualizza sorgente” e tappate su “Salva”.

Salva preferito

Con Safari Mobile visitate questo articolo, selezionate e copiate uno dei due codici javascript qui sotto.

Versione 1

javascript:(function()%7Bvar%20a=window.open('about:blank').document;a.write('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20'+location.href+'%3C/title%3E%3Cmeta%20name=%22viewport%22%20content=%22width=device-width%22%20/%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E');a.close();var%20b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))%7D)();

Versione 2

javascript:(function(){var d=window.open("about:blank"),a=d.document;a.write("");a.close();var b=a.body.appendChild(a.createElement("form"));b.setAttribute("method","post");b.setAttribute("action","http://ole.michelsen.dk/viewsource/?uri="+location.href);var c=b.appendChild(a.createElement("input"));c.setAttribute("type","hidden");c.setAttribute("name","DOM");c.setAttribute("value",encodeURIComponent(document.documentElement.innerHTML));b.submit()})()

Il primo visualizza il sorgente della pagina come semplice testo, senza abbellimenti.
Il secondo evidenzia la sintassi e permette di usare i vari link, si appoggia ad un servizio esterno, la pagina generata permette le operazioni di selezione e copia del testo, col primo ho incontrato molte difficoltà ad eseguire queste operazioni.
Potete usarli anche entrambi, basta creare un secondo segnalibro seguendo la stessa procedura.

Aprite ora i preferiti, l’icona a forma di libro.

Preferiti

Tappate sul tasto “Modifica” e selezionate il segnalibro precedentemente creato: “Visualizza sorgente”.

Modifica segnalibri

Cancellate l’URL contenuta nel secondo campo, incollate il codice javascript precedentemente copiato e tappate su “Fine”.

Inserimento javascript

Tappate nuovamente su “Fine” ed il gioco è fatto.

Ora non dovrete fare altro che visitare una pagina qualsiasi, aprire i preferiti e selezionare “Visualizza sorgente”, si aprirà una nuova scheda col sorgente della pagina.

Versione 1
Sorgente Versione 1

Versione 2
Sorgente Versione 2

Ho creato entrambi i segnalibri su un iPod Touch 4G con iOS 5.1.1 e funzionano, se avete difficoltà, esistono i commento 🙂 La guida è applicabile a tutti i dispositivi Apple e a tutte le versioni di iOS rilasciate finora.

Non so se le immagini vanno bene, in serata le adatterò alla pagina 😀 Devo trovarne anche una dell’icona di Safari con sfondo trasparente, il bordino bianco non mi piace 🙂 (Rimarrà col bordino bianco :D)

 

Articolo originale: http://tecnologyblog.altervista.org/mini-guida-visualizzare-il-sorgente-delle-pagine-in-safari-mobile/