IE compatibility modes

Hello,

Let me start by saying, I'm no expert in web applications and browsers, however I have run into HTML compatibility issues on and off for many years.  For those that were developing sites way back in the day when the internet was just starting to be something that people were adopting in the home, you may remember having to write javascript to detect the browser version to see what little nuances were going to work for Netscape and what would work for Internet Explorer.  Now that browser technology is even more all-over-the-place with additional players in the browser field, and a wide range of versions for each.  With IE specifically, you may see anything from IE7 to the latest...if not even older.  Later versions of IE (I believe starting with IE8) have various options in them for compatibility.  Certain websites may fail to work correctly in one version of IE, while they work fine in another.  Newer versions of the browser have the F12 debugging tools, which makes it easy to test sites with.  Whenever you have IE open, you can hit the F12 key and you will get a popup window with various tools for website debugging.  Along the menu bar, the last two items on the right site are browser mode and document mode.  In each, you can see a list of versions that you want to display with.

Typically your pages will load at whatever settings you had it at the last time you set it.  However there are some places that can override these.

#1 Group policy.
In both user and computer settings -> Administrative Templates -> Windows Components -> Internet Explorer -> Compatibility View, you will see a list of settings

In this list we can see various options.  Some allow you to provide a list of domain names.  So if you put: contoso.com in there, anything in the whole contoso.com namespace (ie: www.contoso.com, myapp.contoso.com) will all be effected.  Looking through the details will help you decide what may be needed.  The last two options allow lists of sites to be defined.  These settings will effect the Document Mode option in the compatibility functions.  Changing it to IE7 will break HTML5 and newer technologies not supported.

#2 Controlled by the site via META Tags
The X-UA-Compatible meta tag is something you can define in your application. In this article, you can view the allowed values. From my basic testing with this, using the Emulate values seems to force the browser to use that mode. While the others seem to be guidelines which may be ignored if higher version level functionality is implemented in the site. In my case, I threw a canvas tag into a basic website with !DOCTYPE html. When playing with the numbers, it displays with IE9 mode, and with emulate at lower versions, my Canvas disappeared. One interesting thing to note here is that the X-UA-compatible tag seems to override whatever group policy you have in place. That way if you have contoso.com set for one level, but one outlying site mynewapp.contoso.com needs HTML5 support, you can override it from the application itself.

example of tag:
<meta http-equiv="X-UA-Compatible" content="IE=8">

NOTE: This tag needs to be the first tag in the HEAD block

In any case, whenever working with web site problems, its always good to check different version levels to see if a site supports all the variations of browsers that may be in the environment, and make adjustments accordingly using whatever method is best.  Also play around with the F12 tools as they can be quite useful.  Similar tools exist in Chrome, and as extensions in firefox.

Invoke-webrequest example (Finding time for solat in Kuala Lumpur)

On and off over the last few years, I have had to script various html interactions to pull data from sites, navigate through them and parse results.  Previous I had done this with a variety of tools, from scripting Internet explorer with COM, .NET's webclient, and various PERL modules.  Each had a variety of limitations or difficults to overcome with parsing.  Recently I started playing around with Powershell's Invoke-Webrequest.  For simplicity, features and easy parsing, this looks quite promising.  Parsing is especially easy when sites are well designed and various components have unique names.  When you run the request, there is is collection of results under AllElements.

(The webrequest result)

   TypeName: Microsoft.PowerShell.Commands.HtmlWebResponseObject


Name              MemberType Definition
----              ---------- ----------
Equals            Method     bool Equals(System.Object obj)
GetHashCode       Method     int GetHashCode()
GetType           Method     type GetType()
ToString          Method     string ToString()
AllElements       Property   
Microsoft.PowerShell.Commands.WebCmdletElementC...
BaseResponse      Property   System.Net.WebResponse BaseResponse {get;set;}
Content           Property   string Content {get;}
Forms             Property   Microsoft.PowerShell.Commands.FormObjectCollect...
Headers           Property   System.Collections.Generic.Dictionary[string,st...
Images            Property   Microsoft.PowerShell.Commands.WebCmdletElementC...
InputFields       Property   Microsoft.PowerShell.Commands.WebCmdletElementC...
Links             Property   Microsoft.PowerShell.Commands.WebCmdletElementC...
ParsedHtml        Property   mshtml.IHTMLDocument2 ParsedHtml {get;}
RawContent        Property   string RawContent {get;}
RawContentLength  Property   long RawContentLength {get;}
RawContentStream  Property   System.IO.MemoryStream RawContentStream {get;}
Scripts           Property   Microsoft.PowerShell.Commands.WebCmdletElementC...
StatusCode        Property   int StatusCode {get;}
StatusDescription Property   string StatusDescription {get;}

(The All Elements Property)

   TypeName: System.Management.Automation.PSCustomObject

Name        MemberType   Definition
----        ----------   ----------
Equals      Method       bool Equals(System.Object obj)
GetHashCode Method       int GetHashCode()
GetType     Method       type GetType()
ToString    Method       string ToString()
innerHTML   NoteProperty  innerHTML=null
innerText   NoteProperty  innerText=null
outerHTML   NoteProperty  outerHTML=null
outerText   NoteProperty  outerText=null
tagName     NoteProperty System.String tagName=!

Here we have a list of all tag elements on the page. These can be as wide as <html> and everything in that, or down to a leaf element like <img>

Going back to parsing of well designed sites, I wanted to write something to check prayer times.  In Malaysia there are a few sites that post them, one is www.e-solat.gov.my.  In my experience, this site is broken frequently, and with its recent redesign, it looks too complicated to try to parse it.  Www.bankislam.com.my on the other hand, labels various parts of their page, so its easy to pull the data.  In the raw HTML, we have this

<label class="SolatTime">Solat Time, KL <img src="/_layouts/AtQuest/BankIslam/Images/greyarrow3.jpg" /> Imsak 5:59 | Subuh 6:09 | Syuruk 7:28 | Zuhur 1:29 | Asar 4:51 | Maghrib 7:27 | Isyak 8:39</label><br />

We can see here they have the data in a labelled class "SolatTime".  So we can grab that and split up the results, returning a PSobject of times.

$BIsitedata = Invoke-WebRequest -Uri http://www.bankislam.com.my 
$htmldata = $biSitedata.allelements|where {$_.tagname -eq "Label" -and $_.innerhtml -match "SOLAT"}
$result = new-object psobject
$htmldata.innertext.split("|") | where {$_ -notmatch "Solat time" } |foreach {
 $entry = $_.split( )
 add-member -inputobject $result NoteProperty $entry[1] $entry[2]
}
$result

And our results:


Subuh   : 6:09
Syuruk  : 7:28
Zuhur   : 1:29
Asar    : 4:51
Maghrib : 7:27
Isyak   : 8:39