ansaurus

Question

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

Answer 1

A:

Did you try the location.assign method?

location.assign(url)

Gumbo 2009-07-23 19:29:31

This has the same results as above, adding to the list.

Tom Anderson 2009-07-23 20:38:57

upvoted to counter the down vote. It looks to me like he was trying to be helpful.

ScottSEA 2009-07-25 05:36:19

while i would agree with this, not testing code before posting it is not useful.

Tom Anderson 2009-07-25 23:52:23

I tested it and it works for me. The same is true for `location.href`.So I don’t understand your objection.

Gumbo 2009-07-26 07:01:59

So in Google Chrome you can click on a non-anchor element with the location.href = url javascript and hit back to return to the page? Then I must have 5 chrome installs that are botched.

Tom Anderson 2009-07-26 17:43:10

@Tom Anderson: Yes.

Gumbo 2009-07-26 17:55:11

Are you using the dev or release of chrome?

Tom Anderson 2009-07-26 22:20:21

*Edit: I must have viewed over 100 botched chrome installs now, been pinging everyone I know with Chrome and they experience the exact same issue as I have.

Tom Anderson 2009-07-26 22:31:44

This is an issue with Chrome 2, not Chrome 3 (devchannel)

Tom Anderson 2009-07-26 22:49:30

Answer 2

+1 A:

Although, I first must say that this is Chrome behaving stupid, and you probably should not worry about it. Try to create a dummy form and with a GET method and programmatically submit it...

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

Then your onclick...

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

Josh Stodola 2009-07-23 19:41:26

see my answer, but i basically took this method and it worked out great, thanks!

Tom Anderson 2009-07-26 22:29:49

I know it's far from an ideal solution, but I am glad it worked out for you!

Josh Stodola 2009-07-27 00:50:49

Answer 3

+1 A:

Am I missing something? A redirect is not supposed to appear in your browser history navigation. So chrome is doing something most users will prefer.

If you're not doing a redirect, but for example are doing something like trying to determine a links href value on-the-fly, you can do something effectively equivalent to this:

<script>
  function determineDestination()
  {
    this.href="actualDestination";
  }
</script>
<a href="defaultPage" onclick="determineDestination()">click here</a>

If you are actually doing an actual actual redirect, what's the point of allowing the user to select it in the history? When they do, it'll just redirect to the subsequent page. Yes I'm probably missing something (perhaps it's a random redirect or whatever)!

Lee Kowalkowski 2009-07-24 21:03:39

whoa, didn't see your explanation, a-ha! Yes, just use HTML links... Of course every cell in a row will need to be a link (or just pick a column and settle for that). That way at least keyboard navigation would also work, no?

Lee Kowalkowski 2009-07-24 21:11:38

As you can see from the explanation, I am trying to emulate the functionality of the "click on element" similar to how SO does it for the main question listing (clicking on the # answers fro example).

Tom Anderson 2009-07-26 01:56:46

Hmm, the SO #answers box isn't keyboard accessible and exhibits the behaviour you don't want when in Chrome. It looks like you're stuck with using ordinary links. From a semantic point of view, this is the best option regardless of whether you're trying to do plain HTML or a Rich Internet Application. A screen reader user would also be clueless that those elements were links too.

Lee Kowalkowski 2009-07-26 20:45:51

This is for a 100% intranet application, so I don't have to worry about a lot of extra things, but the higher ups are insistent in having this behavior work like this unfortunately.

Tom Anderson 2009-07-26 21:49:33

You can have it looking and behaving however you like. Using real links prohibit nothing. Also, disability discrimination laws have more clout in the workplace, so being an intranet application is even more reason to be accessible. Nothing is actually stopping you.

Lee Kowalkowski 2009-07-27 20:35:22

Answer 4

A:

What you could do using jQuery is something like:

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

Since I don't know the structure of your markup it's difficult to provide a more specific fix.

See the jQuery documentation on wrapInner.

Jason Berry 2009-07-25 05:22:43

Answer 5

A:

What about "clicking" a link with JS?

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

I'm not sure if this work, but it should mimic a user clicking the link.

Darryl Hein 2009-07-25 05:30:18

Answer 6

A:

Taking what Josh Stodola recommended, and doing it with jquery instead, I have created a method that seems to get around this Chrome issue without a lot of overhead in the markup.

Here is a fully working version.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<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"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
     <tr rel="http://www.stackoverflow.com"&gt;
      <td>Title</td>
      <td>Description</td>
      <td>1/1/2009</td>
      <td>Available</td>
     </tr>
    </tbody>
</table>
</div>
</body>
</html>

Tom Anderson 2009-07-26 22:27:30

Answer 7

A:

chrome is not supported location.reload. Use window.open(url, '_self') for page redirect

2009-08-03 06:26:11

That actually doesn't add to history either.

Tom Anderson 2009-08-03 16:19:22

ansaurus

tags:

views:

answers:

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

related questions