Redirect Browser one time only using Javascript

  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 321
  • Loc: Canada

Post 3+ Months Ago

Hi all

On my website, I have a compatibility issue when someone accesses via Microsofte Internet explorer. This issue exists only for a particular feature. For other browsers like Google Chrome, Fire fox and Safari, there is no issue.

I sent up a javascript that detects the browser name and then redirects them to another web page. On this web page the user does a couple of actions to do a work around. When finished he clicks on a button that takes them back to my home page.

As you may see, when the user clicks the button to return to the home page, he is again redirected back to the page they came from since Internet Explorer is detected. The user ends up in an endless loop.

What I would like done is that the first time the user's Internet Explorer is detected,they are sent to the other web page. When the user clicks the button and goes back to the Home page, he should not be redirected again back to the other web page.

I read somewhere that javascript can use cookies to determine this but I am not sure how to do this or if it even can be done.

I would appreciate any suggestions on how to redirect user browser only once.

Thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 321
  • Loc: Canada

Post 3+ Months Ago

Hi All

Does anyone have any suggestions.
They would really be appreciated

Thanks
  • typhon
  • Guru
  • Guru
  • User avatar
  • Posts: 1294
  • Loc: Memphis, Tn

Post 3+ Months Ago

Quick work around. Have the 'detection' page be the home page. have a redirect for all browsers. If they are using IE then send them to the work around page, if not send them to the rest of the site. Then on the work around page, rather than send them back to the homepage send them to the rest of the site..... does that make any sense?
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 321
  • Loc: Canada

Post 3+ Months Ago

Hi Typhon

Thanks for the reply

The problem is that I have a Joomla CMS website.
It uses a template that is common for all my webpages.

This means that no matter where I send the visitor, other than the workaround page which is external, he is in essence directly or indirectly on my home page where all the menus are contained and shown on each web page.

For now I have added a manual link advising Internet Explorer browser users to click on to solve the issue. What I don't like is that the visitor may not click on the link to go to the workaround page, which is why I was hoping to use browser detector on a one time basis.
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1240
  • Loc: Sydney

Post 3+ Months Ago

Then have an IE detector and force the use of firefox to load the site. IE is not compatible with this web site please use firefox :P
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 321
  • Loc: Canada

Post 3+ Months Ago

Hi

Thanks for your reply

IE does work on my website, it is only one feature that has issues.

Although there are many complaints against IE, it is still one of the most popular used browsers. If I stop IE from accessing website, then I will be turning away many potential customers.
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1240
  • Loc: Sydney

Post 3+ Months Ago

That is a problem then eh...... still don't think IE is mosted used and only because it is default for windows i still think majority are Firefox and safari. Anyway that is a different issue.

But i did some Google-Fu and take a look at this and see what you think about adding some of this code to the template header so it will be detected on all pages. But yea this seams like the perfect solution and looking at the code seams like a simple add too.

http://www dot netmechanic dot com/news/vol3/javascript_no15.htm

tell me how ya go with it.
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 321
  • Loc: Canada

Post 3+ Months Ago

Hi

As I had stated before, the template is used for all webpages.

I had put a similar script on my template.

When a visitor visits my home web page and has IE, they are redirected to an external work around page.

They then click on a link which takes them back.

Once they go back, IE is detected and they are sent back to the work around page. Since the script is on the template, it really does not matter which page I send them to and they will be redirected back to the workaround page.

What I am hoping for is a script that detects IE and sends visitor to work around page. When they click to return, the script will determine that they had been on the home page before and so will not redirect them back to the workaround page causing an endless loop.
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 321
  • Loc: Canada

Post 3+ Months Ago

I checked around to see what was the most popular browser and found the following statistics as of January 2012:

Firefox: 37.1%
Chrome: 35.3%
IE: 20.1%
Safari: 4.3%
Opera: 2.4%

If we believe these statistics, then IE is still a somewhat popular browser.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Hi Wpas,

When I first started reading your thread, that was my initial idea to solve your problem: cookies. Basically all you need to do is first test if a certain cookie exists, and if it does not and if the browser matches your problem browser, then it would redirect. Once they have fixed the problem a new cookie would be set, and then the process is repeated. Since the cookie now exists, they would not redirect the next time they are at your home page.

You can absolutely set cookies using JavaScript. Are you using any JavaScript frameworks? I use the jQuery framework, and this can be easily done with jQuery. If not you can still use regular Javascript as well, but there is an example with jQuery on how to set and read cookies.

So lets say they complete the action. You can then set a cookie called "fixCompleted":

JAVASCRIPT Code: [ Select ]
$.cookie("fixCompleted", "true");


You could then do a quick test to see if the cookie really exists:

JAVASCRIPT Code: [ Select ]
alert( $.cookie("fixCompleted") );


If all is working then you can remove that line and simply do a test for the homepage like so:

JAVASCRIPT Code: [ Select ]
if($.cookie("fixCompleted") != 'true') { //do redirection }


If it is not true then do a redirect. This is all simplified, but hopefully gives you the idea.
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 321
  • Loc: Canada

Post 3+ Months Ago

Hi

Thanks for your reply

I am having trouble setting and checking for cookie.

To set the cookie I use the following:

Code: [ Select ]
<SCRIPT LANGUAGE = JAVASCRIPT>
cookie.set('msie', 'redirect', 0); // last argument is number of days until expiry.
</script>
  1. <SCRIPT LANGUAGE = JAVASCRIPT>
  2. cookie.set('msie', 'redirect', 0); // last argument is number of days until expiry.
  3. </script>


To see if the cookie is set I use the following:

Code: [ Select ]
<SCRIPT LANGUAGE = JAVASCRIPT>
alert( cookie.get('msie'));
</script>
  1. <SCRIPT LANGUAGE = JAVASCRIPT>
  2. alert( cookie.get('msie'));
  3. </script>


When I access the web page, I expected a message but get nothing.

Am I missing something or have an error on how to do it.
I am using just Javascript

Thanks
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Hi Wpas,

I am unfamiliar with your cookie.set function. Do you have another function or library which declares this? Typically if you are just using regular JavaScript, I believe you would set a cookie like so:

JAVASCRIPT Code: [ Select ]
document.cookie = "bunch of stuff"


I believe the YUI library allows you to use a function called Cookie.set, but if you are just using regular JavaScript, then that function would not work and you would need to do it more like the way I mentioned above.
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 321
  • Loc: Canada

Post 3+ Months Ago

Hi

Thanks for your response

I retried as follows.

Setting the cookie:

Code: [ Select ]
<script type="text/javascript">
document.cookie = "msie";
</script>
  1. <script type="text/javascript">
  2. document.cookie = "msie";
  3. </script>


checking for cookie:

Code: [ Select ]
<script type="text/javascript">
alert( document.cookie('msie'));
</script>
  1. <script type="text/javascript">
  2. alert( document.cookie('msie'));
  3. </script>



Still did not work
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Hi Wpas,

The example I gave you was a rudimentary example, you still have to do much more than:

JAVASCRIPT Code: [ Select ]
    <script type="text/javascript">
    document.cookie = "msie";
    </script>
  1.     <script type="text/javascript">
  2.     document.cookie = "msie";
  3.     </script>


to set a cookie with regular Javascript. With jQuery it is very simple as I had shown you above, but with Javascript you are going to have to do something more because a cookie contains these items:

  • A name-value pair
  • Expiry date
  • Domain and path

Each cookie has a name-value pair that contains the actual information. The name of the cookie is allows you to look it up later, you will search for this name when reading out the cookie information.

Each cookie has an expiry date after which it is trashed. If you don't specify the expiry date the cookie is trashed when you close the browser.

Each cookie also has a domain and a path. The domain tells the browser to which domain the cookie should be sent. If you don't specify it, it becomes the domain of the page that sets the cookie.

So in your above example, you never specified a name value pair, an expiry date, or a domain and path. Not only should your cookie contain this data, but it has to be formatted in the correct way too like so:

JAVASCRIPT Code: [ Select ]
document.cookie = 'var=value; expires=Fri, 17 Feb 2012 06:42:00 UTC; path=/';


Typically when you write your Javascript, you will probably want to dynamically compute the date, meaning taking the current date via a JavaScript function and then adding a number of days or seconds to that date and then dynamically placing it in the document.cookie string above. Keep in mind that the syntax above is a very strict syntax, so if you miss a semicolon where one belongs it will not work. The format is always like this:

First the name-value pair ('var=value')
Then a semicolon and a space
Then the expiry date in the correct format ('expires=Fri, 17 Feb 2012 06:42:00 UTC')
Then another semicolon and a space
Then the path (path=/)

You may instead want to create some functions that will make this easier:

JAVASCRIPT Code: [ Select ]
function createCookie(name,value,days) {
   if (days) {
      var date = new Date();
      date.setTime(date.getTime()+(days*24*60*60*1000));
      var expires = "; expires="+date.toGMTString();
   }
   else var expires = "";
   document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
   var nameEQ = name + "=";
   var ca = document.cookie.split(';');
   for(var i=0;i < ca.length;i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
   }
   return null;
}
 
function eraseCookie(name) {
   createCookie(name,"",-1);
}
  1. function createCookie(name,value,days) {
  2.    if (days) {
  3.       var date = new Date();
  4.       date.setTime(date.getTime()+(days*24*60*60*1000));
  5.       var expires = "; expires="+date.toGMTString();
  6.    }
  7.    else var expires = "";
  8.    document.cookie = name+"="+value+expires+"; path=/";
  9. }
  10.  
  11. function readCookie(name) {
  12.    var nameEQ = name + "=";
  13.    var ca = document.cookie.split(';');
  14.    for(var i=0;i < ca.length;i++) {
  15.       var c = ca[i];
  16.       while (c.charAt(0)==' ') c = c.substring(1,c.length);
  17.       if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  18.    }
  19.    return null;
  20. }
  21.  
  22. function eraseCookie(name) {
  23.    createCookie(name,"",-1);
  24. }


Then you could simply set a cookie like so:

JAVASCRIPT Code: [ Select ]
createCookie('var','value',30);


Then to read the cookie you could do something like:

JAVASCRIPT Code: [ Select ]
alert(readCookie('var'));


Since the name of the cookie was "var" as set above, that is why I am passing "var" to the function. Finally you can delete the cookie like this then:

JAVASCRIPT Code: [ Select ]
eraseCookie('var');


Hope that helps. I personally would strongly encourage you to start using a Javascript library like jQuery, as the footprint is very small and if you use alot of Javascript throughout your site, you will find that your life will be alot easier, and overall you will be using much less code which in the end actually saves you on how much JavaScript the user has to download. Regardless, if you prefer the direct JavaScript solution, hopefully the above helps you set the cookie.
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 321
  • Loc: Canada

Post 3+ Months Ago

Hi Bigwebmaster

Thanks for your reply.

I started thinking about everything you said and did some more research on this.
I got the impression visitors do not like to be redirected when they go to a website so I decided to display a javascript alert message if the visitor has IE.
I also put an option on my website to allow the visitor to go to the workaround page if they so desired.

I created a sample web page to test that did the following:

First I check to see what browser the visitor is using:

Code: [ Select ]
var browserName = navigator.appName;


If the browser is IE and a cookie called "msie" exists then no message is displayed.
If no cookie exists, then it is created with expiry of 0 so that it is deleted when the browser is closed.
Before the cookie is created, I display the alert message if IE was detected.

Code: [ Select ]
if ((document.cookie.search(/(^|;)msie=/) > -1) && (browserName=="Microsoft Internet Explorer"))
{  
//do nothing
}
else
{  
document.cookie = "msie=true;max-age=" + 60 * 60 * 24 * 0; // 60 seconds to a minute, 60 minutes to an hour, 24 hours to a day, and 0 days.   

if (browserName=="Microsoft Internet Explorer")
{
alert("Welcome Internet Explorer User! \n Please Read The Message In Red, \n In The Left Column Of This Web Page");
}
else
{
//do nothing
}
}
  1. if ((document.cookie.search(/(^|;)msie=/) > -1) && (browserName=="Microsoft Internet Explorer"))
  2. {  
  3. //do nothing
  4. }
  5. else
  6. {  
  7. document.cookie = "msie=true;max-age=" + 60 * 60 * 24 * 0; // 60 seconds to a minute, 60 minutes to an hour, 24 hours to a day, and 0 days.   
  8. if (browserName=="Microsoft Internet Explorer")
  9. {
  10. alert("Welcome Internet Explorer User! \n Please Read The Message In Red, \n In The Left Column Of This Web Page");
  11. }
  12. else
  13. {
  14. //do nothing
  15. }
  16. }


I created a webpage with the above javascript code and tested it using IE, Chrome, Safari and Firefox and it appears to be working fine. The alert message is displayed only for IE and only once.

I would appreciate your comments or suggestions to my solution.

Thanks
  • wpas
  • Proficient
  • Proficient
  • User avatar
  • Posts: 321
  • Loc: Canada

Post 3+ Months Ago

Hi All

Is anyone familiar with Joomla CMS website.

I had tested my cookie script on a regular HTML web page and it worked fine.

When I try to put it on my Joomla 1.5 website, I cannot get the cookie script to work.
It generates the alert message if IE is detected, but it shows it on every page visited which means that the cookie for some reason is not being set and so constant alert message.

Thanks

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 119 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.