chrome renders js different depending on the extension of the file to render [testcase included]_问答_开发者

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.

I'm not sure exactly, but what I do know is that when you use .xhtml extension on a local file in Chrome, then the file is parsed using the XML parser, and if you use a .html extension on a local file, then it's parsed using the HTML parser.

This is easy to prove. Add <span> at the bottom of each file, to make it non-XML-well-formed and try to open it. You'll get a big warning message saying that it could only process up to the error with the .xhtml file, but it will be silently ignored in the .html file.

(Incidentally, the DOCTYPE has no effect on this whatsoever.)

Quite why it doesn't work when XML parsed is less clear, but it may be down to the fact that jQuery uses the innerHTML property in some cases, which shouldn't work with XML parsed DOMs.

The DOCTYPE denotes what kind of standard is used, a .html file with a DOCTYPE of XHTML is processed as XHTML. Not sure why Chrome is behaving differently with the extension .xhtml, it's probably forcing some kind of default DOCTYPE and ignoring the contained one. XHTML has been abandoned now in favour of HTML 5, not sure your current route is one you want to follow to the letter albeit that XHTML will render in an HTML 5 browser.