堆棧內存溢出
  簡體   English   中英

對於具有歷史記錄的跨瀏覽器javascript重定向，有什么好的解決方案？

[英]What is a good solution for cross browser javascript redirect with history?

 原文  2009-07-23 19:21:52  9   8    javascript/ html/ cross-browser

問題描述

我目前正在通過以下操作與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頁。

8 個解決方案

解決方案1
 6 已采納  2009-07-23 19:41:26

雖然，我首先必須說這是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();

解決方案2
 2  2011-12-21 12:30:42

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

解決方案3
 0  2009-07-25 05:22:43

使用jQuery你可以做的是： 

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

由於我不知道標記的結構，因此很難提供更具體的修復。

請參閱wrapInner上的jQuery文檔 。

解決方案4
 0  2009-07-25 05:30:18

用JS點擊鏈接怎么樣？ 

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

我不確定這是否有效，但它應該模仿用戶點擊鏈接。

解決方案5
 0  2009-07-26 22:27:30

考慮到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>

解決方案6
 0  

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

解決方案7
 0  2014-09-26 14:13:13

我知道這是一個較舊的問題，但是如果您導航到同一頁面上的鏈接，您應該能夠簡單地執行以下操作，其中123是項目ID： 

window.location = "items/123";

解決方案8
 0  2016-05-25 17:38:11

這是一個很好的功能和干凈的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();
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 需要javascript跨瀏覽器解決方案？ 在使用javascript跨瀏覽器解決方案上傳之前獲取文件信息 是否有單一的跨瀏覽器解決方案用於從JavaScript中的剪貼板上傳圖像？ 用於打印指定區域的Javascript解決方案。 跨瀏覽器友好 用於檢查Javascript對象是否為html元素的跨瀏覽器解決方案 是否有用於使用javascript訪問Activex對象的跨瀏覽器解決方案 Javascript：跨瀏覽器解決方案，用於選擇焦點上文本框內的所有文本 <a href=“” />通過Javascript</a>觸發點擊<a href=“” />（跨瀏覽器解決方案）</a> 消除Javascript夏令時差距，跨瀏覽器解決方案 Javascript; 瀏覽器歷史記錄； 是否有跨瀏覽器的方式來讀取上一頁url（history.go（-1））和倒數第二頁（history.go（-2））？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM