Tags

, , , , , , , , , , , , , , ,

While working on enterprise web application, I hate writing browser specific codes especially for IE. But to have the application rendering on all browser, we should write those sick codes for each versions of IE you target, using

<!--[if IE 7]> Special instructions for IE 7 here <![endif]-->

in case of CSS and

navigator.userAgent.indexOf("MSIE")

in your JavaScript code. Thanks to Google Chrome team for introducing the Google Chrome Frame (GCF) plug-in.

Google Chrome Frame

Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to Internet Explorer.

What does it do with IE browser?

  1. You will be able to rum HTML5 features on your IE browser, whether it is IE 6, 7, 8 or 9 that doesn’t support HTML5 now.
  2. You don’t have to specify any more browser specific styles as well, as it supports CSS3 as well.
  3. You could use the chrome debugger tool (inspect element) on IE, and take the advantage of JavaScript performance improvements.

Install GCF
Download the stable version of GCF. Please make sure you open this link from IE browser, because it checks if the browser is currently equipped with Chrome Frame plug-in.

If you try to open the link on Google Chrome browser then, you will get the following screen
cf_not_supported
And if you connect from IE browser that has Chrome Frame already installed, the screen will not have the download button. Below is the screen that you will get, if your IE browser is not installed with Chrome Frame.
cf_download

Assuming that you have downloaded and installed GCF plug-in on your machine, lets proceed to the next step.

How to make your website work with GCF?
Making your website to work with GCF is easy, just add the meta tag on top of your page,

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

That’s it! Users running Internet Explorer with GCF installed will automatically have pages that include this tag rendered by GCF.

Check if GCF installed else prompt to install
If your page is set to render on GCF, you should have a logic to check if the user has the GCF installed else we will have to prompt the user to install it. We can use the CFInstall.js script to detect GCF and prompt users to install the plug-in without restarting their browsers.

Here is the code snippet that I have implemented for one of my project.

$(document).ready(function() {
    var isChromeFrameAvailable = true;
    CFInstall.check({
        mode: "popup",
        preventPrompt: true,
        onmissing: function() {
            isChromeFrameAvailable = false;
        }
    });
    if (isChromeFrameAvailable) {
        // Condition if Chrome frame is available
        window.location = "app-dashboard.jsp";
    }
    else {
        // Condition if Chrome frame is unavailable
        ifChromeFrameMissing();
    }
});

For further reading on this, please read getting started document on Chrome Frame.

How to open a webpage outside GCF?
This was one challenge that I faced while working with GCF, to open a webpage of your website/web application outside GCF and render in IE engine. The task was, we had to migrate an old CRM application to HTML5 that render well on mobile, tablets and desktop. The old application was targeted for IE 7 and 8 and some pages works only on IE. So we have to find a solution, to make the application run on GCF and open specific pages in new tab in IE rendering engine. How to make this possible?

When a user clicks a hyperlink in a web browser, the browser sends a request to the server holding the destination webpage. The request includes the referer field, which indicates the last page the user was on and its based on this request header the new page is being rendered. So a link in GCF is clicked to open on new tab, it will defanitly open on new tab with GCF and we needed the solution here.

noreferrer
I have read about the HTML rel attribute ‘noreferrer’. HTML rel attribute ‘noreferrer‘ specifies that the browser should not send a HTTP referer header if the user follows the hyperlink. This will make the page to render out of GCF, all that you have to do is, add a hyperlink tag with the requested url and rel attribute set as ‘noreferrer‘.

<a href="http://4uxdevelopers.com" target="_blank" rel="noreferrer">4uxdevelopers.com</a>

The above link inside GCF rendered page, when clicked will open the web address http://4uxdevelopers.com in a new tab on IE rendering engine. To ensure that your page has rendered correctly on IE, just right click on the mouse, you could identify the rendering engine from the right click menu options.

Right click menu on GCF page
cf_page

Right click menu on non GCF page (IE)
ie_page

We are done! Hope this would have been useful to you in one way or the other. Hope that you would start using GCF on your project. Let me know if you have any challenges on GCF, we will try to solve it together.

Cheers!