带有历史记录的跨浏览器 javascript 重定向的好解决方案是什么？答案

【问题标题】：What is a good solution for cross browser javascript redirect with history?带有历史记录的跨浏览器 javascript 重定向的好解决方案是什么？
【发布时间】：2009-07-23 19:21:52
【问题描述】：

我目前正在与谷歌浏览器进行以下操作：

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 列之一（# 答案等），然后单击返回按钮，它将带您返回 2 页。

【问题讨论】：

我编辑了我的答案。请尝试一下。
另外，Chrome 对我来说表现正确。它按预期返回。
今天小试一下，看看用jquery解决方案是否容易实现。
表单方法也不好用。
您是否查看过您的历史记录（History 菜单，Show History）？

标签： javascript html cross-browser

【解决方案1】：

不过，我首先必须说 Chrome 的行为很愚蠢，您可能不必担心。尝试创建一个虚拟表单并使用 GET 方法并以编程方式提交它...

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

然后你的点击...

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

【讨论】：

看我的回答，但我基本上采用了这种方法，效果很好，谢谢！
我知道这远非理想的解决方案，但我很高兴它为您解决了问题！
这种重定向在 Firefox 13.0.1 中对我不起作用，使用 JQuery 1.7.1 和以下代码：$('<form id="dummyForm" method="GET" action="/content/application-submit.php"> <input type="hidden" name="application" value="success" /></form>').submit();。但是，如果您使用以下内容，它会起作用：$('<form id="dummyForm" method="GET" action="/content/application-submit.php"> <input type="hidden" name="application" value="success" /></form>').appendTo('body'); document.getElementById('dummyForm').submit();。
也就是说，除非它实际上在文档中，否则您不能使用它在 Firefox 中重定向。
@JoshStodola 经过我的测试。它在 IE8 和 Chrome 中运行良好，但重定向的 url 以一个不必要的问号结尾，如何删除它？谢谢。

【解决方案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();
}

【讨论】：

嗨，rbawaskar，经过我的测试。它在 IE8 和 Chrome 中运行良好，但重定向的 url 以一个不必要的问号结尾，如何删除它？谢谢

【解决方案3】：

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

window.location = "items/123";

【讨论】：

【解决方案4】：

你可以用 jQuery 做的事情是这样的：

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

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

请参阅jQuery documentation on wrapInner。

【讨论】：

【解决方案5】：

用 JS “点击”链接怎么样？

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

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

【讨论】：

我意识到这是一个古老的答案，但我相信.click() 只会触发在a 标签上注册的任何click 事件。我可能是错的。我最近遇到了一个问题，它不起作用，我不得不使用jquery.simulate.js。

【解决方案6】：

采用 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>

【讨论】：

【解决方案7】：

chrome 不支持 location.reload。使用 window.open(url, '_self') 进行页面重定向

【讨论】：

这实际上也不会添加到历史记录中。

【解决方案8】：

这是一个基于 Josh Stodola 的功能强大且干净的 jQuery 解决方案（对我不起作用）。

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

【讨论】：