Talk In Code

There are two main ways in which to redirect the browser using JavaScript, both of which look at the location of the window object. These are the location.href property and location.replace function.

location.href

The following example will cause the page to redirect to another page, keeping the browser history. This might seem like a minor point, but if you redirect a user to another page they will be able to click back, which will mean that they are redirected again.

<script type="text/javascript">
window.location.href="http://www.talkincode.com/";
</script>

location.replace

This works in the same way as location.href, but in this case the redirection will occur and no history will be kept in the browser. This means that if a user visits the page with this code on they will instead see a different page. This means that the user can’t click on the back button and view the page that redirected them. Here is an example of its usage.

<script type="text/javascript">
window.location.replace("http://www.talkincode.com/");
</script>

You can also add this to a link by doing the following, although the user wouldn’t be able to get back to the page that redirected them.

<a href="javascript:window.location.replace('http://www.talkincode.com/')" title="Talk In Code">Talk In Code</a>

It should be noted here that you will probably want to avoid doing this sort of redirect unless you really have to. For example, if you relied on a JavaScript redirect in an important part of a form process and the user has JavaScript turned off then the process is quite likely to break. The ideal situation is to use server side scripts and redirect rules to force the browser to redirect in a more robust manner. Also, in terms of SEO using a JavaScript redirect is pointless as search engine spiders will probably not understand them.

The first thing you learn about in PHP is probably how to print something. This is usually done with a call to the echo or print, but there is another way to print things by writing content directly to the output buffer. The following code looks like you are writing to a file, but the text will appear in the browser window because we are writing to the php://output output stream.

$fp = fopen("php://output", 'r+');
fputs($fp, "Hello World");

Or another way…

file_put_contents("php://output", "Hello World");

The php://output stream is an encapsulation between PHP and the browser. The stream doesn’t really exist, but PHP knows what to do with it.

Why would you ever need to know this? Well lets say that you had an application that produced some logs when users performed certain actions. You might want to print those to screen in your development environment rather than save them. So rather than altering the code to see what environment you are in you can just set a configuration option so that you write to php://output instead of the log file. This means that your logs will appear with your output.

As the new Google web browser was released last night (I’m writing this post using the new browser) I thought it would be good to update our readers on the user agent string that this web browser has.

The user agent of any browser can be found out by using the userAgent property of the navigator object. This is available in most modern browsers and is thankfully also present in Google Chrome.

navigator.userAgent

As an example the user agent for FireFox 3 on a Windows XP machine looks like this.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Using the same code, and the same machine, the user agent produced by Google Chrome is as follows.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

So detecting it should only be a case of looking for the word “chrome”. Just like this:

var ischrome = navigator.userAgent.indexOf("Chrome")? true : false;

If you want to see what the user agent is on your machine then past this code into a web page and hit refresh. It is quite a basic bit of code and should work in most browsers.

<span id="useragent"></span>
<script type="text/javascript">
document.getElementById('useragent').innerHTML = navigator.userAgent;
</script>

QuirksMode.org is the personal and professional site of Peter-Paul Koch, freelance web developer in Amsterdam, the Netherlands.

The consists of lots of pages about CSS and JavaScript as well as lots of information about the differences between browser implementations of CSS and JavaScript. I find it a great resource for looking up things that I am stuck on, and often find the site when searching for problems on Google.

Peter-Paul Koch has also written a book on the subject of JavaScript and browser compatibility and can be found talking about his subject in many events throughout the year.

Retrieving the current user agent using PHP is done via the use of the $_SESSION super global array. The following line of code will print off your user agent.

echo $_SERVER['HTTP_USER_AGENT'];

For Firefox on Windows this user agent will look like this.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

This is all fine, but what about getting more meaningful information, like just the version number. Here is a function that will get the version number (major or minor) from anyone visiting a page with Internet Explorer.

function ieVersion($minor=false){
 preg_match('/MSIE ([0-9]\.[0-9])/',$_SERVER['HTTP_USER_AGENT'],$match);
 if(!isset($match[1])){
  return -1;
 }else{
  if($minor){
   return $match[1];
  }else{
   return floor($match[1]);
  }
 }
}

This will work for all of the different versions of Internet Explorer, but what about other browsers. One solution might be to create lots of functions that each checked the user agent string for a specific string. However, this is just overcomplicating things. Here is a function that will detect the user agent and version number and present it in a nice form.

function userAgent($minor=false){
 $agents = array('MSIE'=>'/MSIE ([0-9]\.[0-9])/',
  'Firefox'=>'/Firefox\/([0-9]*\.[0-9]*\.[0-9]*\.[0-9]*)/',
  'Opera'=>'/Opera\/([0-9]*\.[0-9])/',
  'Safari'=>'/Version\/([0-9]*\.[0-9]*\.?[0-9]*)/');
 foreach($agents as $agent=>$pattern){
  preg_match($pattern,$_SERVER['HTTP_USER_AGENT'],$match);
  if(isset($match[1])){
   if($minor){
    return $agent.' '.$match[1];
   }else{
    return $agent.' '.floor($match[1]);
   };
  };
 };
 return 'Unknown browser';
}

This only checks for four different browser types so if you want to add more then just append the name and pattern to match to the array. To run this function and find out the browser version of a visitor use the following code.

echo userAgent(true).'<br />';

From the user agent example given above this will output Firefox 2.0.0.12.

This is a very simplified mechanism of fetching user agents as it just gives a version number. To get a very clear idea about the capabilities of the browser you can use the get_browser() function. By passing a user agent string into the function it will return an array detailing everything that the browser is capable of, right down to whether cookies or JavaScript is enabled. The only problem is that a browser.ini file is needed to decode the user agent string, and this is not always available.