Force IE8 not to use compatibility mode, using MetaData in Theme not working

Question

As my question Title already tells I have problems forcing the IE8 not to use the compatibility mode.

I found two solutions on the web one from Michael Gollmick , wich adds this Code to the beforeRenderResponse:

if (context.getUserAgent().isIE()) {
    var response = facesContext.getExternalContext().getResponse();
    response.setHeader("X-UA-Compatible", "IE=8");
}

This solution works fine the Compatibility mode Button in the Browser disapears and the Page looks like it should. B

ut I don't want to add this Code to every XPage, so I tried the solution from Per Henrik Lausten to add MetaData to my Theme:

<resources>
  <metaData>
    <httpEquiv>X-UA-Compatible</httpEquiv>
    <content>IE=8</content>
  </metaData>
</resources>

But it seems that this MetaData in the Theme has no efect. When taking a look at the HTML source Code I found the Meta tag in the header of the sourceCode but IE8 seems just to ignore it.

<meta content="IE=8" http-equiv="X-UA-Compatible">

So how can I get the MetaData from the Theme working? Or maby any other solution to automatical add the onRenderResponse Code to every XPage.

Answer 1

You can do this with a PhaseListener or a Theme. When using a Theme you can fe use a styleClass you don't need in your XPage and compute the value:

<control>
    <name>ViewRoot</name>
    <property>
        <name>styleClass</name>
        <value>#{javascript:
            var response = facesContext.getExternalContext().getResponse();
            response.setHeader("X-UA-Compatible", "IE=8");
        }</value> 
    </property>
</control>

The PhaseListener would look like this:

package ch.hasselba.xpages.jsf;

import javax.faces.event.PhaseEvent;
import javax.faces.event.PhaseId;
import javax.faces.event.PhaseListener;
import javax.servlet.http.HttpServletResponse;

public class IEPhaseListener implements PhaseListener {

    private static final long serialVersionUID = 1L;

    public void afterPhase(PhaseEvent event) {
    }

    public void beforePhase(PhaseEvent event) {
        HttpServletResponse response = (HttpServletResponse) event
                .getFacesContext().getExternalContext().getResponse();
        response.setHeader("X-UA-Compatible", "IE=8");

    }

    public PhaseId getPhaseId() {
        return PhaseId.RENDER_RESPONSE;
    }

}

Answer 2

If you have a custom control that all your XPages use, then add the beforeRenderResponse code to that. For instance you might have a custom control for the layout of your pages.

Answer 3

I had the same problem, but using Sven's code in the theme didn't work either. No matter what the order, when I added the X-UA-Compatible tag and a favIcon in the theme, the favIcon was listed first after the title in the HTML output. Removing the favIcon fixed the issue.