Question

我目前正在通过以下操作与Google Chrome进行竞争：

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

我已经尝试了所有，并且都不会添加历史记录条目。 Google Chrome中是否有办法使用历史记录进行javascript重定向？

感谢。

解释我们有一个项目表，当点击该行时，我希望页面导航到指定的URL，如果有人有一个很好的解决方案，除了使用我们现在使用的onclick = send方法，请告诉我。

更新似乎Stackoverflow它自己也有同样的问题。在主视图中，单击问题列表中的前3列之一（＃answers等），然后单击后退按钮，它将返回2页。

Answer 1

虽然，我首先必须说这是Chrome表现得很愚蠢，你可能不应该担心它。尝试创建一个虚拟表单并使用GET方法并以编程方式提交它...

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

然后你的onclick ......

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

Answer 2

基于@Josh Stodola回答的所有javascript解决方案

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();
}

Answer 3

使用jQuery可以做的是：

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

由于我不知道标记的结构，因此很难提供更具体的修复。

请参阅jQuery documentation on wrapInner。

Answer 4

如何用“点击”链接JS？

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

我不确定这是否有用，但它应该模仿用户点击链接。

Answer 5

考虑到Josh Stodola所推荐的内容，并使用jquery代替它，我创建了一个方法，似乎可以解决这个Chrome问题而不会在标记中产生大量开销。

这是一个完全正常的版本。

<!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>

Answer 6

chrome不支持location.reload。使用window.open（url，'_ self'）进行页面重定向

Answer 7

我知道这是一个较旧的问题，但是如果你导航到同一页面上的链接，你应该能够简单地执行以下操作，其中123是项目ID：

window.location = "items/123";

Answer 8

这是一个很好的功能和干净的jQuery解决方案，基于Josh Stodola（对我来说没有用）。

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();
}

对于具有历史记录的跨浏览器javascript重定向，有什么好的解决方案？

8 个答案: