为什么 Chrome 在“预"中加载我的 HTML标签? [英] Why is Chrome loading my HTML in a "pre" tag?

查看：22
本文介绍了为什么 Chrome 在“预"中加载我的 HTML标签?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个非常基本的网页，我正在用 Arduino 服务器加载它.当我在 Safari 上查看页面时，一切正常，并且在我使用检查器时看起来不错.但是当我在 Chrome(39.0.2 版)上加载它时，它会将我的所有 HTML 包装在一个pre"标签中，这会阻止我的网页加载(我附上了显示 Inspector 输出的屏幕截图).它还将我的所有代码从head"标签移到body"标签中.首先，这是我的 HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><头><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'><!-- 加载 JSON 数据--><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.|主页<body onload="preparePage()"><div id="容器"><div id="headerDiv"><div id="logoDiv"><a href="/"><img src="cLogo.png"></div></a>

<div id="contentDiv">

现在当我检查我的页面时，我看到了:

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

有人知道 Chrome 出现了什么问题吗?

编辑 1 - 我正在使用 Arduino 以太网扩展板来托管和从 SD 卡加载此页面.(它在 Safari 上运行良好，所以我认为我的代码中存在一些问题，而不是 Arduino 的问题.

编辑 2 - 我附上了 Google Chrome Inspector 的截图(抱歉 - 复制和粘贴替换了很多字符，所以我去了截图路线http://i.stack.imgur.com/d09k8.png

编辑 3 - 从 Chrome Inspector 添加网络"选项卡 http://i.stack.imgur.com/zL7L1.png

解决方案

根据您的截图，页面带有 Content-type: text/plain 标题.这会导致 chrome 将其显示在 pre 标记中，因为它假定您希望将 HTML 视为文本.您的网络服务器需要编写一个正确的 Content 类型的标头.

如何使用 arduino 以太网屏蔽编写标头的示例 可以在这里找到.

与上面链接的代码相反，您应该使用文件扩展名之类的东西动态确定内容类型.以便图像也以正确的内容类型(例如 image/jpg)传输.

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" "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>

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 http://i.stack.imgur.com/d09k8.png

Edit 3 - Added "Network" Tab from Chrome Inspector http://i.stack.imgur.com/zL7L1.png

解决方案

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.

这篇关于为什么 Chrome 在“预"中加载我的 HTML标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆