Recently i was working on a project where there is a need to determine whether JavaScript is enabled or was disabled by the user. Depending whether the JavaScript is enable or not, the system will rely on JavaScript operation if it does and PHP operation if it doesn’t. The fundamental solution to this is to detect whether JavaScript is enable before the system can determine which approach can be used. However, there is no easy solution to determine whether a client scripting is enable in a server scripting language (PHP) without finish loading the page! Therefore, in this article we will discuss whether there is such possibility to use PHP to determine whether JavaScript is enabled for your web application.
The Problem
The main problem is that a server script language can never be able to determine whether a client script language is available as the server script language will always run first. Furthermore, the client script is always run on the client side and never executed on the server side. Therefore, when the server scripting is running at the server side and send to the client for display, the server scripting language will have no idea what is going on with the client environment. Hence, strictly speaking will be unable to determine JavaScript is enable or disable.
The Solution
Although it sounds impossible for server side to determine whether a client scripting is available such as JavaScript but certain tricks can be perform in order to achieve this. However, it won’t be a convenient one. Recall that every web system should have a redirect index.php page to prevent our code from showing in plaintext if anything happen? We can use that page to determine whether javascript is enable by writing a script to either append a value and post over to the next page or a better alternative is to store it into the user cookie. If you store a value and post it to the next page, the validation can only occur within the main page. However, if you utilize cookie to determine whether JavaScript is available, you can always use php to determine whether that cookie value is available. If it is not available (they delete their browser cookie on the way) you can redirect that user to the index.php to revalidate JavaScript is enable. Once it is being verify, you will just show a message to the user after index.php has redirect or run on pure php.
On the index.php script, it will be something like this,
01.<script type='javascript/text'>
02.function createCookie(name,value,days) {
03. if (days) {
04. var date = new Date();
05. date.setTime(date.getTime()+(days*24*60*60*1000));
06. var expires = "; expires="+date.toGMTString();
07. }
08. else var expires = "";
09. document.cookie = name+"="+value+expires+"; path=/";
10.}
11.createCookie('verify_cookie', 'Y', 1);
12.</script>
13.<meta http-equiv="refresh" content="2;url=main.php?c=1">
We have a function that help us to create a cookie if JavaScript available. Once this is done, we redirect the user to main.php where our real page is located with a get value of c=1. This value is needed to avoid recursive request. We can’t use PHP header function because it will redirect before JavaScript has the opportunity to run and the code should be placed before the head tag to make this valid. On all other pages we will have something like this before the header.
01.<?php
02. //filter the global variable first.
03. if(!isset($_COOKIE['verify_cookie']) && $_GET['c'] == 1){
04. echo 'JavaScript is disable';
05. }else if(!isset($_COOKIE['verify_cookie'])){
06. //perform check to determine whether the cookie expire OR it really was disabled.
07. header('location: index.php');
08. }else{
09. //perform another check on javascript similar to index.php if you afraid that the cookie exist but javascript was disabled.
10. }
11.?>
The above is to verify whether javascript exist in each page and use to run either pure php or combination with JavaScript as these script can be imported using PHP if needed. The solution above can be use as a references and not necessary a solid solution.
Alternative Solution
The alternative solution to this is to use the noscript tag which is very simple and make your life a better place to live in.
1.<script>
2.document.getElementsByTagName('body')[0].innerHTML = 'JavaScript is enable.';
3.<script>
4.<noscript>
5.JavaScript is disabled.
6.<noscript>
Conclusion
Many will turn to noscript tag that can really ease and simplify the way we code. However, for some system which required to determine whether script is enabled for different server script to run. This might help those that are doing such approach as noscript tag will only run after the server has processed its information. On the other hand, you can combine this approach with the no tag approach to better validate your logic.
Author: Clay Lua
Web Collections 