代码之家 › 专栏 › 技术社区 › Tom Anderson

什么是跨浏览器javascript历史重定向的好解决方案?

cross-browser html javascript

Tom Anderson · 技术社区 · 16 年前

我目前正在与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

我已经试过了,也不会添加历史记录条目。谷歌Chrome中有没有一种方法可以用历史记录进行javascript重定向?

谢谢。

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

更新似乎stackoverflow本身也有同样的问题。在主视图中,单击问题列表中前3列中的一列(答案等),然后单击后退按钮,它将使您后退2页。

8 回复 | 直到 10 年前

Tom Anderson 16 年前

虽然,我首先必须说这是铬行为愚蠢,你可能不应该担心它。尝试创建一个虚拟表单,并使用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();

rbawaskar 13 年前

基于@josh stodola answer的所有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();
}

Jason Berry 16 年前

您可以使用jquery执行以下操作:

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

因为我不知道您的标记的结构,所以很难提供更具体的修复方法。

见 jQuery documentation on wrapInner .

Darryl Hein IrishChieftain 16 年前

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

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

我不确定这是否有效,但它应该模拟用户单击链接。

Tom Anderson 16 年前

采用JoshStodola推荐的方法,用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>

Muhammad Danish Khan 16 年前

不支持chrome location.reload。使用window.open(url,“自己”)进行页面重定向

frodo2975 11 年前

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

window.location = "items/123";

Max Hudson 10 年前

这里有一个基于JoshStodola的功能性、干净的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();
}