Friday, May 11, 2012

Forcing browser compatibility in IE

I happened to stumble upon this concept long back and due to some reason which I don't remember, I lost interest in it. After a long time when I checked my archives, I came across this concept again and thought its time I put it to good use. I as most developers do, believe, IE is the browser that is a gift for the developers. Its so buggy that you can forget why your wife threw a stick at you the same morning :).

And to add to the recipe we have different versions of IE which again are different from each other in behavior. Or at least that what I believe as far as I have worked with it. Stories apart, I will come to the point,

I just found some one talking about how to force IE8 to work like IE7 when working with XPages.That article was exhaustive, and I have lost track of it. But I do have parts of it documented there and there for my understanding.

All you got to do is put the following code in beforeRenderResponse event: 
// first option uses compatibility mode, second option too but stronger
// X-UA-Compatible: IE=7
// X-UA-Compatible: IE=EmulateIE7
if (context.getUserAgent().isIE(8, 8)) {
  var exCon = facesContext.getExternalContext();
  var response = exCon.getResponse();
  response.setHeader("X-UA-Compatible", "IE=EmulateIE7");
}

Understanding Compatibility View

Before displaying a standards-mode Web page, Internet Explorer 8 checks to see if the domain name of the Web site appears in the Compatibility View List. If so, the site is displayed using Compatibility View. If not, and the page contains no other direction, Internet Explorer 8 displays the page in Internet Explorer 8 Standards mode.
When a standards-based Web page is displayed in Compatibility View, the following changes occur.
Pages are displayed in IE7 mode rather than IE8 mode.
In the user-agent string, the browser identifies itself as MSIE 7.0 instead of MSIE 8.0.
Conditional comments and version vectors recognize the browser as Internet Explorer 7, rather than Internet Explorer 8.
These changes help ensure that users can still use Web sites that do not fully support the features of Internet Explorer 8.
Please note that the X-UA-COMPATIBLE header has greater precedence than Compatibility View. If a Web site is on the Compatibility View List and a page on that site includes an X-UA-COMPATIBLE header telling Internet Explorer 8 to display a page in IE8 mode, the page is displayed in Internet Explorer 8 Standards mode. This allows Web developers to support Internet Explorer 8 Standards mode on an incremental basis

Javascript to identify the compatibility mode


engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // Assume quirks mode unless proven otherwise.
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
      }
   }
   // The engine variable now contains the document compatibility mode.
}


To specify a document mode for your Web pages, use the META element to include an X-UA-Compatible http-eqiv
header in your Web page. The following example specifies EmulateIE7 mode compatibility.
    
   
      My Web Page</< span>title></div><div>      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /></div><div>   </< span>head></div><div>   <body></div><div>      <p>Content goes here.</< span>p></div><div>   </< span>body></div><div></< span>html></div><div><br></div><div>    </div><div><br></div><div>The content attribute specifies the mode for the page; for example, to mimic Internet Explorer 7 beha vior, specify IE=EmulateIE7.</div><div>Likewise, specify IE=5, IE=7, or IE=8 to select one of those compatibility modes. You can also specify IE=edge to tell Internet Explorer 8 to use the</div><div>highest mode available. </div><div><br></div></div>

2 comments:

  1. Hi, how do I test an odbc connection in xpages? I'm creating a setting document that the user can enter their server path, domino domain etc. What I need right now is I have an editbox for the user to enter the name of an ODBC data source. Then on save button it will try to connect to that ODBC. If it can connect, the save can continue.

    What I have done right now is using form validation but it doesn't seems right. For that field validation I use:
    a := @DbCommand("ODBC" : "nocache" ; @ThisValue; ""; ""; "":"");
    @If(@IsError(a);@Failure("Invalid ODBC.");@Return(""))

    It will prompt for user name and password which is not exactly what I want. What I want is just to test if it can connect at all to verify that the ODBC/DSN exist. I do not know the username/password and I'm not trying to query anything from any table too.

    Now in my xpages I already have the editbox,an error message(display message control), and a button to save. I have the extension library and JDBC connection manager under my controls list. If possible I want to use SSJS to create a connection in the save button event. Detail/step-by-step is very appreciated as I have never done this before. Only traditional notes development. Thanks.

    ReplyDelete
  2. Hi Stalker, you question gives me lots of interesting ideas. Thanks for that. I am in middle of something else at present. Will post on this some time later. :)

    ReplyDelete