I was trying to implement an image panner I found here Chrome renders the same document differently depending on the extension of the file requested. I have created a test case, where it works when the file it's not named as test.xhtml
You can download the test case from here
Does anybody know why or how to solve it? I want my files to be .xhtml In IE and FF it works fine.
Code: test.html / test.xhtml (change the name to see that works with one but not with the other).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css">
/*Default CSS for pan containers*/
.pancontainer {
position: relative; /*keep this intact*/
overflow: hidden; /*keep this intact*/
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/imagepanner.js"></script>
</head>
<body>
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width: 350px; height: 200px; float: left; position: relative; overflow-x: hidden; overflow-y: hidden; cursor: move; "><img src="./test_files/image.jpg" style="position: absolute; width: 700px; height: 525px; left: -175px; top: -163px; display: block;" />
</div>
</body>
</html>
Update: Apparently, thanks to the comments is tomcat which is sending application/xhtml+xml as Content-Type.
HTTP_TRANSACTION_READ_RESPONSE_HEADERS
--> HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
X-Powered-By: JSF/1.2
Pragma: no-cache
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: must-revalidate
Expires: Mon, 8 Aug 2006 10:00:00 GMT
Content-Type: application/xhtml+xml;charset=UTF-8
Transfer-Encoding: chunked
Date: Wed, 09 Jun 2010 07:39:30 GMT
I've added a mime-type to the web.xml:
<mime-mapping>
<extension>xhtml</extension>
<mime-type>text/html</mime-type>
</mime-mapping>
But still does not work. I belive that FacesServlet is reading the file extension and sending the content-type, overriding the configuration in web.xml
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
I've tried to modify the web.xml configuration to change .xhtml to .html, but Faces Servlet serves the files as application/xhtml+xml I guess I could add a filter to the webapp modifying the Content-Type to text/html but that's a bit hacky.
Why JSF with Facelets does not serve the files as html? Or how to do so?
Update Found how to serve text/html from JSF. You need to add
<f:view contentType="text/html"/>
after <html> and before <head>
Now it works as expected in chrome.