Что такое хорошее решение для перекрестного перекрестного браузера javascript с историей?

В настоящее время я участвую в 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-self есть такая же проблема. В главном окне нажмите на один из первых трех столбцов в списке вопросов (# ответов и т.д.), Затем нажмите кнопку "Назад", он вернет вам 2 страницы.

Ответы

Ответ 1

Хотя, сначала я должен сказать, что это ведет себя глупо, а вы, вероятно, не должны беспокоиться об этом. Попробуйте создать фиктивную форму и с помощью метода 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();

Ответ 2

все решение javascript на основе ответа @Josh Stodola

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

Ответ 3

Что вы можете сделать, используя jQuery, это что-то вроде:

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

Так как я не знаю структуру вашей разметки, трудно обеспечить более конкретное исправление.

Смотрите документацию jQuery на wrapInner.

Ответ 4

Как насчет "нажатия" ссылки на JS?

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

Я не уверен, что эта работа, но она должна имитировать пользователя, щелкнув ссылку.

Ответ 5

Принимая то, что рекомендовал Джош Стодола, и вместо этого делаю это с помощью 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>

Ответ 6

chrome не поддерживается location.reload. Используйте window.open(url, '_self') для перенаправления страницы

Ответ 7

Я знаю, что это старый вопрос, но если вы переходите к ссылке на той же странице, вы должны просто сделать следующее: 123 - это идентификатор элемента:

window.location = "items/123";

Ответ 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();
}