JavaScript

Monday, December 31. 2012

JavaScript Cookie Check

It's strange to see that today in 2012 browser cookies are still making trouble. It shouldn't be that difficult to check with JavaScript if cookies are enabled in the browser. The non-standard navigator.cookieEnabled flag works correctly in Chrome, Firefox, Opera and Safari but Internet Explorer is simply lying to us! It supports this flag (It's not null or undefined) but it is always set to true! So we still need hacks for this browser. It's also strange that I wasn't able to find a working hack on the Internet. So I wrote my own:

/**
 * Checks if browser supports cookies.
 * 
 * @return {boolean}
 *             True if browser supports cookies, false if not.
 */
function supportsCookies()
{
    var cookieEnabled = navigator.cookieEnabled;
    
    // When cookieEnabled flag is present and false then cookies are disabled.
    // Thanks to IE we can't trust the value "true".
    if (cookieEnabled === false) return false;

    // Internet Explorer is lying to us. So we have to set a test cookie
    // in this browser (We also do it for strange browsers not supporting
    // the cookieEnabled flag). But we only do this when no cookies are
    // already set (because that would mean cookies are enabled)
    if (!document.cookie && (cookieEnabled == null || /*@cc_on!@*/false))
    {
        // Try to set a test cookie. If not set then cookies are disabled
        document.cookie = "testcookie=1";
        if (!document.cookie) return false;
        
        // Remove test cookie
        document.cookie = "testcookie=; expires=" + new Date(0).toUTCString();
    }

    // Well, at least we couldn't find out if cookies are disabled, so we
    // assume they are enabled
    return true;
};

Let's explain what this code is doing:

  • When the navigator.cookiesEnabled flag is present and is false then we definitely know that cookies are disabled. All major browsers except Internet Explorer will stop right here when cookies are blocked.
  • When navigator.cookiesEnabled flag is not present (maybe some really old browser) or when Internet Explorer is deteced (Checked with JScript conditional compilation) then a test cookie is set. But we only do this when there are no cookies already set (Because when there is already a cookie then cookies can't be disabled). When our test cookie can be read again then cookies are enabled, otherwise they are disabled.

The code works in IE7-10, Firefox 17, Chrome 23, Opera 12 and Safari 6.

What a shame that code like this is still needed in 2012...

Thursday, May 17. 2012

Fixing JavaScript Console in older browsers and IE

The JavaScript console as introduced by Firebug years ago has grown to a de facto standard in many web browsers. Especially the Webkit JavaScript console in Chrome/Chromium and Safari is extremely well done. Newer Firefox versions now also come with a built-in console. Even Internet Explorer comes with a basic console-like thing but unfortunately it sucks...

So far I used custom logging mechanisms or log4javascript to log messages in my JavaScript applications. Thanks to the JavaScript console this would be unnecessary if all browsers had descent support for it. But unfortunately the console implementations in some browsers are incomplete or completely absent. So even this harmless line of code in your application can prevent execution in Internet Explorer when the development panel is closed (In which case window.console is not defined at all):

console.warn("Config not found. Using defaults.");

So to be able to use all console features without worrying about missing browser-support I wrote a small library called console-shim which detects the implemented console features and tries to complete them. Some features are emulated so they fully work in all browsers while other features are silently ignored. If console logging is not supported by the browser at all then console-shim tries to use log4javascript if available or it silently ignores all logging attempts. See the README for a full list of replacement implementations for missing functionality.

Tuesday, April 10. 2012

jQuery Fullscreen Plugin

Modern browsers (Like Chrome and Firefox) provide an interesting new feature: A fullscreen mode which can be controlled by JavaScript. It is even possible to switch a single HTML element to fullscreen. This is useful for videos or images for example. Unfortunately browsers currently only provide the necessary methods with the usual browser-specific prefixes:

// Firefox
element.mozRequestFullScreen();
document.mozCancelFullScreen();
document.mozFullScreen;

// Chrome
element.webkitRequestFullScreen();
document.webkitCancelFullScreen(); 
document.webkitIsFullScreen;

To simplify the usage of this new feature I wrote a small jQuery plugin.

Continue reading "jQuery Fullscreen Plugin"

Saturday, January 28. 2012

How to use Java applets in modern browsers

Finding out how to embed a Java applet in current major browsers is quite a task. Lots of pages still suggest using the <applet> tag and describe how to use the mayscript attribute to allow communication between Java and JavaScript. Other pages recommend using this mysterious mayscript attribute even in <embed> and <object> tags. I think there is a lot of voodoo out there, attributes which sound important but are not necessary at all...

So I started studying this stuff by myself. My goal was embedding a Java applet on a page which must work in Internet Explorer 7+, Google Chrome, Firefox, Opera and Safari. The applet must receive an applet parameter and must communicate with JavaScript in both directions.

Continue reading "How to use Java applets in modern browsers"

Wednesday, January 11. 2006

OOP with JavaScript

First of all it should be said that OOP with JavaScript is a real pain. I have read documents on the net where JavaScript is held high for its simple OOP design but that's nonsense. Yes, JavaScript knows objects. And yes, it is possible to create custom objects in a very simple way. But one of the main reasons for OOP is inheritance and this is something which is possible but absolutely dirty in JavaScript. But ok, here you are, so you may be willing to learn it. Or maybe you know it better and can teach me a more clean approach. Feel free to contact me.

Continue reading "OOP with JavaScript"