Question

我有一个非常基本的网页，我正在加载Arduino服务器。当我在Safari上查看页面时，一切正常，当我使用检查器时看起来很好。但是当我在Chrome（版本39.0.2）上加载它时，它将我的所有HTML包装在＆＃34; pre＆＃34;阻止我的网页加载的标记（我附上了显示Inspector输出的屏幕截图）。它还将我的所有代码移出＆＃34; head＆＃34;标记并进入＆＃34; body＆＃34;标签。首先，这是我的HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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.com/css?family=Roboto' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/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>

现在，当我检查我的页面时，我看到了这一点：

它包裹了我的所有HTML，实际上关闭了我身体和html标签之外的标签！

任何人都可以在Chrome中看到这里出了什么问题？

编辑1 - 我正在使用Arduino Ethernet Shield从SD卡托管和加载此页面。（它在Safari上完美运行，因此我认为我的代码中存在某些内容而不是Arduino的问题。）

编辑2 - 我已附上谷歌Chrome Inspector的截图（抱歉 - 复制和粘贴取代了很多角色，所以我去了截图路线 http://i.stack.imgur.com/d09k8.png

编辑3 - 添加＆＃34;网络＆＃34; Chrome Inspector http://i.stack.imgur.com/zL7L1.png

中的标签

Answer 1

根据您的情景，页面随Content-type: text/plain标题一起提供。这导致chrome将其显示在pre标记中，因为它假定您要将HTML视为文本。您的网络服务器需要编写正确的Content - 类型标题。

如何使用arduino以太网屏蔽can be found here编写标头的示例。

与上面链接的代码相反，您应该使用类似文件扩展名的内容动态确定内容类型。因此，图像将使用正确的内容类型（例如image/jpg）进行传输。

Answer 2

为您的POM添加依赖项

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

为什么Chrome会在“预”标记中加载我的HTML？

2 个答案: