javascript - Why is Chrome loading my HTML in a "pre" tag?

I have a very basic web page that I'm loading with an Arduino Server. When I view the page on Safari, everything works fine and looks good when I use the inspector. But when I load it on Chrome (version 39.0.2), it wraps all of my HTML in a "pre" tag which prevents my webpage from loading (I've attached screenshots showing the Inspector output). It also moves all of my code out of the "head" tag and into the "body" tag. First, here is my HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
    <head>



    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <link href='' rel='stylesheet' type='text/css'>
      <link href=':400,700' rel='stylesheet' type='text/css'>

         <!-- LOAD THE JSON DATA -->
              <script type="text/javascript" src="data.txt"></script>
              <link rel="stylesheet" type="text/css" href="home.css">
              <script src="home.js" type="text/javascript"></script>




        <title>CANARI JR. | Home</title>

    </head>


<body onload="preparePage()">

<div id="container">


    <div id="headerDiv">

        <div id="logoDiv"><a href="/">
         <img src="cLogo.png"> 
        </div></a>





     </div>



<div id="contentDiv">


</div>



</div>
    </body>
</html>

Now when I inspect my page, I see this:

And it wraps around all my HTML and actually closes the tag outside of my body and html tag!

Anyone see what is going wrong here in Chrome?

Edit 1 - I am using an Arduino Ethernet Shield to host and load this page from an SD card. (It works perfectly on Safari, so I'm thinking there's something in my code and not an issue with Arduino).

Edit 2 - I've attached screenshot of the Google Chrome Inspector (sorry - copy and pasting replaced a lot of the characters, so I went screenshot route .png

Edit 3 - Added "Network" Tab from Chrome Inspector .png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
    <head>



    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <link href='http://fonts.googleapis./css?family=Roboto' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis./css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

         <!-- LOAD THE JSON DATA -->
              <script type="text/javascript" src="data.txt"></script>
              <link rel="stylesheet" type="text/css" href="home.css">
              <script src="home.js" type="text/javascript"></script>




        <title>CANARI JR. | Home</title>

    </head>


<body onload="preparePage()">

<div id="container">


    <div id="headerDiv">

        <div id="logoDiv"><a href="/">
         <img src="cLogo.png"> 
        </div></a>





     </div>



<div id="contentDiv">


</div>



</div>
    </body>
</html>

Now when I inspect my page, I see this:

And it wraps around all my HTML and actually closes the tag outside of my body and html tag!

Anyone see what is going wrong here in Chrome?

Edit 1 - I am using an Arduino Ethernet Shield to host and load this page from an SD card. (It works perfectly on Safari, so I'm thinking there's something in my code and not an issue with Arduino).

Edit 2 - I've attached screenshot of the Google Chrome Inspector (sorry - copy and pasting replaced a lot of the characters, so I went screenshot route https://i.sstatic/d09k8.png

Edit 3 - Added "Network" Tab from Chrome Inspector https://i.sstatic/zL7L1.png

Share Improve this question edited Jan 13, 2015 at 4:34 asked Jan 13, 2015 at 4:04 Alan Scarpa 791 silver badge7 bronze badges

Is this code what safari tells you it is or your raw output? How does it look when you view the source in chrome. Also have a look at the Network tab in chrome dev tools and see what content type your page is delivered with. – LJᛃ Commented Jan 13, 2015 at 4:09
Can you share the chrome inspect out also. I tried your same page without js it renders perfectly. – Neo Commented Jan 13, 2015 at 4:11
The code I have is my raw HTML code in Sublime Text Editor. In Safari Inspector, it looks the same and loads perfect. I added the chrome inspect output. – Alan Scarpa Commented Jan 13, 2015 at 4:22
Chrome does this when your code is delivered as text/plain, without any content type or is very invalid HTML. Your screenshots do not show the Network tab of the inspector though. – LJᛃ Commented Jan 13, 2015 at 4:24
1 @LJ_1102 YES! That's it! I added client.println("Content-Type: text/html"); when my Arduino Server opens the page and it's fixed! That's the answer so if you'd like to post it, I'll accept it. Thanks a lot, it was bugging me for 2 hours. Strange how it worked with Safari. – Alan Scarpa Commented Jan 13, 2015 at 4:44

| Show 4 more ments

2 Answers 2

Sorted by: Reset to default 9

According to your sceenshots the page is delivered with the Content-type: text/plain header. This leads chrome to display it in a pre tag as it assumes you want to view the HTML as text. Your webserver needs to write a proper Content-type header.

An example of how to write headers using the arduino ethernet shield can be found here.

Contrary to the code linked above, you should determine the content-type dynamically, using something like the file extension. So that images are transferred with the correct content-type(for example image/jpg) aswell.

Add Dependency to your POM

<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why is Chrome loading my HTML in a "pre" tag? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)