Visualizzazione risultati 1 fino 3 di 3

Discussione: Cambiare URL pagina

  1. #1
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Question Cambiare URL pagina

    Ciao a tutti.
    Sto creando un sito con una sola pagina.
    Questa pagina contiene tutte le pagine del sito, che vengono cambiate tramite AJAX.
    Vorrei sapere come fare a non cambiare mai pagina ma modificare l'URL della pagina nella barra degli indirizzi
    Ho letto questo e questo, vorrei utilizzare il secondo metodo che mi sembra più semplice.
    Il problema è che non ho capito né cosa scrivere in "data" né a cosa serve il secondo codice.
    Citazione Originalmente inviato da Fortunecat.it
    Per cambiare l’URL sarà necessario utilizzare la funzione:

    Codice:
    History.pushState(data,titolo,url);
    Dove “titolo” ed “url” sono rispettivamente il titolo della pagina ed il nuovo URL mostrato dal browser, mentre “data” sono informazioni che vogliamo passare (fra poco sarà più chiaro).

    In questo modo si creeranno delle task nella cronologia. Cliccando il pulsante del browser per andare nella pagina precedente si ritorna all’URL precedente, ma il contenuto della pagina? Come accorgersi che lo stato (URL e titolo della pagina) è cambiato? Rispondo subito con questa funzione:

    Codice:
        History.Adapter.bind(window,'statechange',function(){
            var State = History.getState();
            var Data = State.data;
            var Titolo = State.title;
            var URL = State.url;
        });
    Grazie mille.

  2. #2
    Guest

    Predefinito

    Allora: supponiamo che tu abbia una funzione JavaScript caricaPagina(url); che ti carica i contenuti dall'url specificato e li scrive nella pagina corrente.
    Ora, se usi jQuery puoi fare così:
    Codice HTML:
    <script type="text/javascript">
        $(document).ready(function ( )
            {  // Al caricamento del documento, imposta le azioni che vuoi.
                $("a.usaAjaxPerCaricare").click(function ( )
                    {  // Al click, carica la pagina via AJAX.
                        var url = $(this).attr('href');  // L'URL che volevi.
                        caricaPagina(url);  // Carica la pagina.
                        history.pushState(null, null, url);  // Imposta l'URL sulla barra degli indirizzi. Se vuoi impostare un titolo (che però non serve a niente, perché non è supportato da nessun browser, al momento), scrivilo come secondo argomento al posto di "null".
                        window.addEventListener('popstate', function ( ) { caricaPagina(location.pathname); });  // Quando l'utente preme "Indietro" sulla cronologia, ripete la stessa azione, ma al contrario.
                    });
            });
    </script>
    Dovrebbe funzionare, ma sono andato un po' a braccio, quindi gli errori di battitura si nascondono sicuramente fra le righe di codice, pronti a tendere un agguato.

    PS: guarda anche questo.

    EDIT: Ok, sono un idiota. Ho risposto a tutto meno che alla tua domanda.
    Allora: in data non so cosa ci vada messo. So solo che deve essere codice JSON, ma quale siano le opzioni a me è ignoto.
    Il motivo della seconda funzione (window.addEventListener('popstate', ...) da me) è questo: una volta che hai caricato la nuova pagina siamo tutti felici e contenti, ma se poi l'utente decide di tornare indietro? Se si ricaricasse l'intera pagina, svanirebbe la magia. Dunque "intercettiamo" l'evento prima che il browser ricarichi tutta la baracca, richiamando la stessa funzione di prima.
    Ultima modifica di tryphpnuke : 01-06-2012 alle ore 18.57.16 Motivo: Aggiunto link.

  3. #3
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Predefinito

    Grazie, ho provato senza riuscirci.
    Alla fine sono tornato al primo esempio.
    Ecco il codice ridotto (per chi ne avesse bisogno - ho eliminato le scritte inutili).
    Codice HTML:
    <script src="http://davisjs.com/javascripts/davis.js"></script>
    <script type="text/javascript" charset="utf-8">
      app = Davis(function () {
    
    	this.configure(function () {
    	  this.raiseErrors = true
    	})
    
    	this.get('/:name', function (req) {
    		// eseguo la funzione per cambiare il contenuto della pagina
    	})
    
      })
    
      // the app will trigger an unsupported event if the current browser doesn't support pushState
      app.bind('unsupported', function () {
    	console.log("the server better be able to do all this greeting and insulting cos the browser can't")
      })
    </script>
    <a href="/Pagina">Questo link, non chiedetemi come, non farà ricaricare l'intera pagina!</a>
    Grazie mille ancora tryphpnuke!

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •