{"id":2667,"date":"2009-10-07T07:22:41","date_gmt":"2009-10-07T12:22:41","guid":{"rendered":"http:\/\/bobbeaty.com\/wp\/?p=2667"},"modified":"2009-10-07T07:27:59","modified_gmt":"2009-10-07T12:27:59","slug":"adding-google-chrome-frame-to-pages-for-ie-compatibility","status":"publish","type":"post","link":"https:\/\/bobbeaty.com\/wp\/archives\/2667","title":{"rendered":"Adding Google Chrome Frame to Pages for IE Compatibility"},"content":{"rendered":"

\"GoogleChrome.jpg\"<\/p>\n

I've been working on a web app that's a very heavy JavaScript page, and as such, I've had to force users to run it in Google Chrome<\/a> as that's the only browser that has a decent JavaScript Engine (on Windows) that can handle the load. It doesn't hurt that I'm using a lot of the Google AJAX libraries, and so they are sort-of made for each other.<\/p>\n

This morning I took a whack at the new Google Chrome Frame<\/a>. This slick IE plug-in is the complete<\/em> Google Chrome<\/a> environment in a plug-in frame for IE. This means that pages that run in Chrome<\/a> will run in the Chrome Frame<\/a> without modification<\/em><\/strong>.<\/p>\n

That's big<\/strong> news. I was stunned.<\/p>\n

So I decided to try it out. First, you need to put the meta<\/tt> tag in your pages to tell IE to use the Chrome Frame<\/a> plugin:<\/p>\n

\n  < meta http-equiv=\"X-UA-Compatible\" content=\"chrome=1\" \/>\n<\/pre>\n
That, in itself, will make things work, but if you wanted to verify<\/em> that the plug-in was installed, then you can add the following to your page to do the check and redirect the user to the Google Chrome Frame<\/a> download page if it's not installed. First, you need to load the script in the head<\/tt> of the page:<\/p>\n
  <<\/span> script type=<\/span>"text\/javascript"<\/span>\n  src=<\/span>"http:\/\/ajax.googleapis.com\/ajax\/libs\/chrome-frame\/1\/CFInstall.min.js"<\/span> ><\/<\/span>script><\/span><\/pre>\n
Then in the body<\/tt> of the page, you need to define a div<\/tt> that will be the target of the download prompt frame:<\/p>\n
\n  < div id=\"chrome_check\" \/>\n<\/pre>\n
just make the id<\/tt> unique and you'll be fine.<\/p>\n
Next, have the JavaScript code in the initialization of your page:<\/p>\n
  CFInstall.check<\/span>(<\/span>{<\/span> node:<\/span> "chrome_check"<\/span> }<\/span>)<\/span>;<\/span><\/pre>\n
The docs on Chrome Frame<\/a> say that the page should automatically reload, but I haven't found that to be the case. It could be just me, I've only tried it once, but even that isn't bad. It's something that allows users to send links in emails and have their default browser (IE) render the project's pages in a Chrome<\/a> environment.<\/p>\n
Super sweet.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve been working on a web app that’s a very heavy JavaScript page, and as such, I’ve had to force users to run it in Google Chrome as that’s the only browser that has a decent JavaScript Engine (on Windows) that can handle the load. It doesn’t hurt that I’m using a lot of the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6],"tags":[],"class_list":["post-2667","post","type-post","status-publish","format-standard","hentry","category-coding","category-cube-life"],"_links":{"self":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/2667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/comments?post=2667"}],"version-history":[{"count":8,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/2667\/revisions"}],"predecessor-version":[{"id":2675,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/posts\/2667\/revisions\/2675"}],"wp:attachment":[{"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/media?parent=2667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/categories?post=2667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bobbeaty.com\/wp\/wp-json\/wp\/v2\/tags?post=2667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The CFInstall.check()<\/tt> function checks to see if Chrome Frame<\/a> is installed, and if not, will display at the div<\/tt> indicated by the node<\/tt> property a download page hosted by Google. The user can then download Chrome Frame<\/a> and that's it. It's ready to go.<\/p>\n