Implementing Google chrome frame Plugin to your website

Google Chrome frame lets web developers create web features based on technologies that are not yet available in some versions of Internet Explorer, such as rich text editing and faster Javascript execution. If you use Internet Explorer, you can still use it to view websites that contain such features, by first downloading the Google Chrome Frame plugin.

This google chrome frame plugin is also used to avoid the memory leakage in IE if our site is using AJAX,jQuery. If once we have installed this plugin we just need to change the meta tag so that IE browser will render using chrome engine. Ref this link for more details.

In this Post we are going to Implement Google chrome frame Plugin to our website wherein we will be showing a div(ref figure below) on top of our page, only in Internet Explorer and if Google chrome frame Plugin is not installed.

Below are the steps:

Step1: Create a above div and place it at the top of the page. Make the div style as display:none

Step2: Checking google chrome frame plugin is installed on the machine or not.

Below is the function that can do the trick

function IsGoogleChromePluginInstalled() {

    try {

        var i = new ActiveXObject('ChromeTab.ChromeFrame');

        if (i) {

            return true;

        }

    }

    catch (e) {

    }

    return false;

}

Call the above function in the document.ready function. If the function above function returns false(means GCF plugin not installed) then make the above created div style as display:block. So that it will display the above div to the user.

Step3: Call the below function on the onclick= installGoogleChromeFrame(); for Install Now button

function installGoogleChromeFrame() {   

    if ($(".chromeFrameOverlayContent").length > 0) {

        $(".chromeFrameOverlayContent, .chromeFrameOverlayUnderlay").show();

    }

    else {

        CFInstall.check({

            url: document.location.protocol + "//" + {SingleUser Or Multi User url},

            mode: "overlay",

            destination: window.location

        });

        $(".chromeFrameOverlayContent, .chromeFrameOverlayUnderlay").show();

        var chromeframeheight = document.body.scrollHeight;

        $('.chromeFrameOverlayUnderlay').css('height', chromeframeheight);

        $("#chromeFrameCloseButton").click(function () {

            $(".chromeFrameOverlayContent, .chromeFrameOverlayUnderlay").css({ display: "none" });

        });

    }

}

Single user installation:

www.google.com/chromeframe/eula.html?user=true

Multiple user installation:

www.google.com/chromeframe/eula.html?prefersystemlevel=true

Step4:

With the above three steps we are good to show a message to install the Google chrome frame Plugin.

When user clicks on Install Now button an overlay will comes up on top of our webpage asking user to install.

Hope this helps…