¿Cuál es una buena solución para el navegador cross Javascript redirigir con la historia?

Actualmente estoy luchando Google Chrome en la siguiente acción:¿Cuál es una buena solución para el navegador cross Javascript redirigir con la historia?

location.href = url

location.replace(url)

document.location = url

window.navigate(url) // doesn't work in Chrome/Firefox

location.assign(url)

window.open(url, '_self')

window.location.href = url

He intentado todo, y tampoco lo hará añadir una entrada de la historia. ¿Hay alguna manera en Google Chrome de hacer un redireccionamiento de JavaScript CON historial?

Gracias.

Explicación Tenemos una tabla de elementos, al hacer clic en la fila, quiero que la página para navegar a una URL especificada, si alguien tiene una buena solución a este aparte de utilizar el onclick = envío método que estamos usando ahora, por favor avíseme.

actualización Parece que Stackoverflow su auto-tiene este mismo problema exacto. En la vista principal, haga clic en una de las primeras 3 columnas en la lista de preguntas (# respuestas, etc.), luego haga clic en el botón Atrás, lo llevará de regreso a 2 páginas.

Fuente

2009-07-23 Tom Anderson

He editado mi respuesta. Por favor pruebalo. –

Además, Chrome se comporta correctamente para mí. Vuelve atrás, como se esperaba. –

Voy a intentarlo un poco hoy, a ver si es fácil de implementar con una solución jquery. –

Aunque, primero debo decir que esto es un comportamiento estúpido de Chrome, y probablemente no deberías preocuparte por ello. Trate de crear una forma ficticia y con un método GET y enviarlo mediante programación ...

<form id="dummyForm" method="GET" action="#"> 
    <input type="hidden" name="test" value="test" /> 
</form>

Luego, su onclick ...

var frm = document.forms["dummyForm"]; 
frm.action = url; 
frm.submit();

Fuente

2009-07-23 19:41:26

ver mi respuesta, pero básicamente tomé este método y funcionó muy bien, ¡gracias! –

Sé que está lejos de ser una solución ideal, ¡pero me alegra que haya funcionado para usted! –

Este tipo de redirección no funcionó para mí en Firefox 13.0.1, usando JQuery 1.7.1 y el siguiente código: '$ ('

') .submit();'. Sin embargo, funciona si usa algo como: '$ (' ') .appendTo (' body '); document.getElementById ('dummyForm'). submit(); '. – Barbarrosa

lo que podría hacer uso de jQuery es algo así como:

$("table tbody td").wrapInner('<a href="myurl.htm?id=' + getTheIDSomehow + '"></a>');

Como no conozco la estructura de su marcado, es difícil proporcionar una solución más específica.

Ver el jQuery documentation on wrapInner.

Fuente

2009-07-25 05:22:43

¿Qué tal "hacer clic" en un enlace con JS?

<a href="/url.html" id="clickme">blah blah</a> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#clickme').click(); 
}); 
</script>

No estoy seguro de si esto funciona, pero debe imitar a un usuario que hace clic en el enlace.

Fuente

2009-07-25 05:30:18

Me doy cuenta de que esta es una respuesta antigua, pero creo que el '.click()' activará solo los eventos 'click' registrados en la etiqueta' a'. Podría estar equivocado. Recientemente tuve un problema donde eso no funcionó y tuve que usar 'jquery.simulate.js'. – keyboardSmasher

Tomando lo que Josh Stodola me recomendó, y al hacerlo con jquery en su lugar, he creado un método que parece solucionar este problema de Chrome sin una gran sobrecarga en el marcado.

Aquí está una versión totalmente funcional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>Row Navigation with History</title> 
<style type="text/css"> 
    body { 
     font: 14px Georgia, serif; 
    } 

    #page-wrap { 
     width: 800px; 
     margin: 0 auto; 
    } 

    table { 
     border-collapse:collapse; 
     width:100%; 
    } 
    thead { 
     text-align:left; 
     font: 16px serif; 
    } 
    tbody { 
     font: 14px Georgia, serif; 
    } 

    tr { 
     cursor:pointer; 
    } 

    td { 
     border: 1px solid #ccc; 
     padding:10px; 
    } 

    .slim { 
     width:88px; 
    } 

    .wide { 
     width:300px; 
    } 

    .hover { 
     background-color:#eee; 
    } 

</style> 
<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("jquery", "1.3.2"); 
</script> 
<script type="text/javascript"> 
    $(function() { 

     $("td").hover(function() { 
      $(this).parent().addClass("hover"); 
     }, function() { 
      $(this).parent().removeClass("hover"); 
     }); 


     $("tr").click(function() { 
      if (navigator.userAgent.toString().indexOf("Chrome/2") != -1) 
      { 
       var form = $("<form></form>"); 
       form.attr("method", "get"); 
       form.attr("action", $(this).attr("rel")); 
       form.submit(); 
      } else { 
       location.href = $(this).attr("rel"); 
      } 
     }); 
    }); 

</script> 

</head> 
<body> 
<div id="page-wrap"> 
<table> 
    <colgroup /> 
    <colgroup class="wide" /> 
    <colgroup class="slim" /> 
    <colgroup class="slim" /> 
    <thead> 
     <tr> 
      <th>Title</th> 
      <th>Description</th> 
      <th>Date</th> 
      <th>Status</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr rel="http://stackoverflow.com/questions/1173912/what-is-a-good-solution-for-cross-browser-javascript-redirect-with-history"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
     <tr rel="http://www.stackoverflow.com"> 
      <td>Title</td> 
      <td>Description</td> 
      <td>1/1/2009</td> 
      <td>Available</td> 
     </tr> 
    </tbody> 
</table> 
</div> 
</body> 
</html>

Fuente

2009-07-26 22:27:30

chrome no es compatible con location.reload. Uso window.open (url, '_self') para redirigir la página

Fuente

2009-08-03 06:26:11

Eso realmente no agrega al historial tampoco. –

toda Javascript solución basada en @ Josh Stodola responder

function goTo(url, data){ 
    var ele_form = document.createElement("FORM"); 
    ele_form.method = "POST"; 
    ele_form.id = 'dummy_form'; 
    ele_form.action = url; 
    if (!!data){ 
     for(key in data){ 
      var dummy_ele = document.createElement('INPUT'); 
      dummy_ele.name = key; 
      dummy_ele.value = data[key]; 
      dummy_ele.type = 'hidden'; 
      ele_form.appendChild(dummy_ele); 
     } 
    } 
    document.getElementsByTagName('body')[0].append(ele_form); 
    document.getElementById('dummy_form').submit(); 
}

Fuente

2011-12-21 12:30:42 rbawaskar

Hola, rbawaskar, después de que lo probé. Funciona bien en IE8 y Chrome, pero el URL redirigido termina con un signo de interrogación innecesario, ¿Cómo quitarlo? –

actualizó la respuesta ... método de formulario agregado como POST – rbawaskar

Sé que esto es una cuestión mayor, pero si usted está navegando a una enlace en la misma página, usted debería ser capaz de simplemente hacer lo siguiente, donde 123 es el ID de artículo:

window.location = "items/123";

Fuente

2014-09-26 14:13:13 frodo2975

Aquí es una solución jQuery funcional y limpio agradable basado en Josh Stodola de (que no funcionaba para yo).

function redirect(url, data) { 
    var form = $('<form method="get"></form>'); 
    form.attr("action", url); 

    for (key in data){ 
     var input = $('<input type="hidden"/>'); 

     input.attr("name", key); 
     input.attr("value", data[key]); 

     form.append(input); 
    } 

    $("body").append(form); 

    $(form)[0].submit(); 
}

Fuente

2016-05-25 17:38:11 maxhud

¿Cuál es una buena solución para el navegador cross Javascript redirigir con la historia?

Respuesta

Cuestiones relacionadas