Desidero document.apen per creare un nuovo elemento cronologia e ritorno per tornare alla pagina originale

Sto usando document.open() + write() + close() per creare una nuova pagina dal client. Funziona, ma sostituirà l'elemento cronologia corrente con la nuova pagina, quindi quando l'utente fa clic su di esso non vede la pagina su cui si trovavano. Esempio:Desidero document.apen per creare un nuovo elemento cronologia e ritorno per tornare alla pagina originale

Alla pagina
Cliccare sul pulsante per passare alla pagina mostrata di seguito.
Fare clic sul pulsante Fai clic su quella pagina.
Fare clic su Indietro - questo riporta l'utente alla pagina iniziale che non desidero.

Ho provato a inserire un elemento di cronologia con history.pushState() ma anche questo non funziona. Permette alla pagina document.open di avere un nuovo URL. Facendo clic su Indietro si riporta l'utente all'URL della pagina che si desidera visualizzare, ma rimane sempre la "Nuova pagina".

Codice pagina HTML completo in basso. Questo tipo di esempio non funziona nei violini ma può essere testato localmente.

<html> 
<body> 
<button onclick="clickme()">Click me</button> 
<script> 
function clickme() { 
    history.pushState(null, null, "Results/"); 
    document.open("text/html"); 
    document.writeln("New Page"); 
    document.close(); 
} 
</script> 
</body> 
</html>

Nota: Alla ricerca di una soluzione con supporto cross browser, compreso l'ultimo Chrome 45 che possono ha rafforzato la sicurezza un po '.

fonte

2015-09-05 Mike

Vorrei creare una pagina Web effettiva per pagina 3 invece di spingere eventi cronologici falsi.

history.pushState non è supportato nei precedenti IE (9 e seguenti) ed è buggato su alcuni Androidi, questo potrebbe non essere un problema per il tuo progetto. http://caniuse.com/#search=history.pushState

Se non è possibile modificare il back-end per reindirizzare alla pagina 3, si potrebbe fare questo in javascript:

salvare il codice HTML in localStorage
reindirizzamento alla pagina 3
inserire il html quando viene caricata la pagina 3.

pagina 2:

function clickme() { 
    var html = 'my generated html'; 
    localStorage.savedHtml = html; 
    window.location = 'page3.htm'; 
}

pagina 3:

<html> 
<head> 
    <!-- I'm assuming you're using jquery --> 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
</head> 
<body> 
<div id="restoredHtml"></div> 
<script> 
    $(function(){ 
     var savedHtml = localStorage.savedHtml || 'No html to restore'; 
     $('#restoredHtml').html(savedHtml); 
     localStorage.removeItem('savedHtml'); 
    }); 
</script> 
</body> 
</html>

fonte

2015-09-10 21:40:17 ProgrammerGuy

Grazie. Ci proverò. – Mike

Sì, questo funziona. Grazie. Si basa sulla memoria locale, ma posso usare il mio piano di backup di una nuova scheda se la memoria locale non è supportata e questo metodo per rilevare se è: http://stackoverflow.com/questions/11214404/how-to-detect- if-browser-supports-html5-local-storage – Mike

Nota: il motivo per cui non è stata creata una pagina reale è che la pagina web generata da javascript stava eseguendo un sacco di matematica che non avevo voglia di eseguire nel porting del back-end. Ci sono migliaia di righe di javascript su molte pagine che usano questo metodo. Tutte le pagine hanno ~ 20 anni originariamente ospitate da GeoCities quando non potevo davvero inviare un modulo. – Mike

È possibile memorizzare un oggetto stringa su pushState e quindi rileggere il valore dell'oggetto in modo da poter costruire una pagina da tale valore anziché dallo stream del browser.

Quindi, prima abbiamo aggiungere un nuovo elemento con pushState()

var markup = "New page content"; 
history.pushState({ pageContent : markup } , null, "Results/"); 
document.open("text/html"); 
//Write the markup using document object 
document.writeln(markup); 
document.close();

di quanto si può allegare un ascoltatore in onpopstate caso e verificare se lo stato ha pageContent, e se ha di costrutto il documento da quello:

window.onpopstate = function(event) { 

    if(event.state.hasOwnProperty("pageContent")){ 
     document.open("text/html"); 
     //Write the markup using document object 
     document.writeln(event.state.pageContent); 
     document.close(); 
    } 
};

fonte

2015-09-07 18:40:29 Burimi

Ancora cercando questo. In Chrome, posso attivare l'evento onpopstate solo se javascript fa parte del markup. – Mike

@Mike puoi essere più specifico riguardo al problema? – Burimi

Per ricapitolare, l'utente è a pagina 1. Fare clic su un collegamento per andare a pagina 2 che è un modulo. Compilano il modulo e fanno clic su un pulsante che attiva alcuni calcoli e quindi genera una nuova pagina 3 utilizzando document.open/writeln/close. Tutto funziona bene. Usando history.pushState() posso far sembrare che questa pagina 3 abbia un vero URL con una propria voce nella storia. Ma su Chrome quando l'utente fa clic indietro da pagina 3 si trovano a pagina 2 nello stack cronologia, ma vedono ancora il contenuto della pagina 3 - la pagina che ho generato utilizzando document.writeln. Se metto un evento onpopstate a pagina 2, non sparisce. – Mike

Ho trovato una soluzione, ma ancora non esattamente quello che voglio.

function clickme() { 
    results = window.open(); 
    results.document.writeln("New Page"); 
    results.document.close(); 
}

rende questo, ovviamente, un'intera nuova scheda/finestra per visualizzare i risultati invece di una nuova pagina nella storia della scheda corrente. È più o meno la stessa cosa in un cellulare dal momento che indietro ti porta alla pagina originale, ma non su un browser desktop.

fonte

2015-09-09 15:13:11 Mike

C'è un motivo specifico che è necessario utilizzare document.open, document.write e document.close? Non sarebbe più semplice mantenere una singola pagina in grado di mantenere lo stato e scambiare la marcatura dentro e fuori?

Il seguente codice vi permetterà di utilizzare i pulsanti Avanti e Indietro in Chrome:

<body> 
    <div id="content-area"> 
    </div> 
    <button onclick="clickme()">Change Page</button> 
<script> 
    var state = 1; 
    function changeContent(state) { 
     var contentArea = document.getElementById("content-area"); 
     contentArea.innerHTML = "Page " + state; 
    } 
    function clickme() { 
     state = state+1; 
     history.pushState(state, null, "/Page" + state + "/"); 
     changeContent(state); 
    } 
    window.onpopstate = function(event) { 
     if (event.state != null) { 
      state = event.state; 
     } else { 
      state = 1; 
     } 
     changeContent(state); 
    }; 
    changeContent(state); 
</script> 
</body>

fonte

2015-09-12 18:14:08 brenzy

Desidero document.apen per creare un nuovo elemento cronologia e ritorno per tornare alla pagina originale

risposta

Problemi correlati