为啥 Chrome 会在我的 HTML 顶部添加一个正文，然后给我一个看似虚假的错误消息？

Posted 2023-03-05

技术标签:

【中文标题】为啥 Chrome 会在我的 HTML 顶部添加一个正文，然后给我一个看似虚假的错误消息？【英文标题】：Why does Chrome slap a body at the top of my HTML, and then give me a seemingly bogus err msg?为什么 Chrome 会在我的 HTML 顶部添加一个正文，然后给我一个看似虚假的错误消息？ 【发布时间】：2017-02-13 05:23:38 【问题描述】：

当我从通过 Ajax 调用的 REST 方法返回动态生成的 html 时，我正在替换页面上的 html，如下所示：

[HttpGet]
[Route("unit/begdate/enddate", Name = "QuadrantData")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)

    _unit = unit;
    _beginDate = begdate;
    _endDate = enddate;
    string beginningHtml = GetBeginningHTML(); // This could be called from any page to reuse the same "header"
    string bodyBeginningHtml = GetBodyBeginHTML();
    string top10ItemsPurchasedHtml = GetTop10ItemsPurchasedHTML();
    string pricingExceptionsHtml = GetPriceComplianceHTML();
    string forecastedSpendHtml = GetForecastedSpendHTML();
    string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
    string endingHtml = GetEndingHTML();
    String HtmlToDisplay = string.Format("0123456",
        beginningHtml,
        bodyBeginningHtml,
        top10ItemsPurchasedHtml,
        pricingExceptionsHtml,
        forecastedSpendHtml,
        deliveryPerformanceHtml,
        endingHtml);

    return new HttpResponseMessage()
    
        Content = new StringContent(
            HtmlToDisplay,
            Encoding.UTF8,
            "text/html"
        )
    ;

它是从就绪函数中调用的（当单击按钮时），如下所示：

$(document).ready(function () 
    $("body").on("click", "#btnGetData",
        function () 
            var _begdate = $("#datepickerFrom").val();
            var _enddate = $("#datepickerTo").val();
            var _unit = $("#unitName").text();
            $("#newhourglass").removeClass("hide");

            $.ajax(
                type: 'GET',
                url:
                    '@Url.RouteUrl(routeName: "QuadrantData", routeValues
new  httpRoute = true, unit = "un", begdate = "bd", enddate = "ed" )'
            .replace("un", encodeURIComponent(_unit))
            .replace("bd", encodeURIComponent(_begdate))
            .replace("ed", encodeURIComponent(_enddate)),
                contentType: 'text/plain',
                cache: false,
                xhrFields: 
                    withCredentials: false
                ,
                success: function (returneddata) 
                    $("body").html(returneddata);
                    $("#newhourglass").addClass("hide");
                ,
                error: function () 
                    console.log('error in ajax call to QuadrantData');
                    $("#newhourglass").addClass("hide");
                
            );
        );
        . . .

名为“HtmlToDisplay”的字符串（Ajax 调用中的“returneddata”）开头如下：

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>eServices Reporting - Customer Dashboard</title><link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\"><script src= . . .

如您所见，它不是以虚假/多余的“body”标签开头，但是当我在 Chrome 开发工具中通过 F12 查看页面源代码时，第一件事（在“<!DOCTYPE html>”上方和其余部分) 是“<body>”

为什么<body> 在那里？

在 Chrome 开发工具的控制台中，有一个错误消息“Uncaught SyntaxError: Unexpected token var”

当我双击它时，它会将我带到“<body>”标签。

所以我不仅想知道为什么“<body>”存在，还想知道为什么 Chrome 开发工具显然认为它是一个名为“var”的令牌

在尝试替换原始 html 之前，我煞费苦心地将“HtmlToDisplay”的内容与 html 页面源进行了比较，并没有发现明显的差异（只是字符串的转义（“\”）符号等）。

为什么 Chrome 会在我的 HTML 顶部添加一个 <body> 标签，以及为什么在单击“Uncaught SyntaxError: Unexpected token var”控制台时它会将我带到那里错误消息？

更新

虽然很奇怪，或者至少看起来很奇怪，但我不认为多余/虚假的<body> 标签是真正的问题，因为出于某种原因，它也在未修改的页面上 - 在我什至单击之前按钮替换html，页面（查看页面源）开始：

<body>

<!DOCTYPE html>
<html>
<head>

更新 2

这个多余/虚假的“<body>”标签显然来自_Layout.cshtml，它是：

<body>
    @RenderBody()
    <hr />
    <footer>
        <p> &copy; @DateTime.Now.Year - PRO*ACT USA</p>
    </footer>
</body>

当我删除两个（打开和关闭）<body> 标签后，谜团就解开了——它们不再出现在 html 中。

不过，我仍然有同样的基本问题；只是控制台中的错误消息现在在单击 2 时转到“<!DOCTYPE html>”上方的空行。

为什么 html 以空行开头，这可能有问题吗？

文档第 1 行的初始空白行同时出现在查看页面源代码和 Chrome 开发工具中。

【问题讨论】：

这个问题读起来就像你在现有的 BODY 中插入了一个带有第二个 BODY 的整个文档 html。这听起来像是一件很奇怪的事情，因为 BODY 不是文档根目录。您可能想改用$('html')。你的意思是这样做：$("html").html(returneddata); ...而不是这个： $("body").html(returneddata); ?没有区别 - 结果是相同的。还有：Does the DOCTYPE declaration have to be the first tag in an HTML document? “为什么 html 以空行开头，这可能有问题吗？” 因为这是您的服务器返回的内容，不，这没有问题。将您带到空白处的调试器并不表示那里有错误，它只是由于某种原因无法找到引发错误的代码所在的位置，可能是因为它不是原始页面的一部分. 如果你通过javascript渲染整个网页，你为什么不直接导航到另一个页面呢？ AJAX 用于更新部分网页，以节省重新加载整个页面的带宽和资源。 【参考方案1】：

查看错误消息Uncaught SyntaxError: Unexpected token var 我认为它与 HTML 无关，而是与嵌入在 HTML 中的 JS 代码有关。

在声明下一个var 之前，您是否缺少分号/括号/语句结尾？我建议您将完整的returneddata 复制到您喜欢的编辑器并搜索所有vars 以查看上一行是否有任何问题。

【讨论】：

以上是关于为啥 Chrome 会在我的 HTML 顶部添加一个正文，然后给我一个看似虚假的错误消息？的主要内容，如果未能解决你的问题，请参考以下文章

为啥这会在我的控制台上打印两次？ [复制]

如何在我的 iOS 应用程序中添加一项权利，以便在请求 Apple 之前快速测试它是不是有效

如何在我的数据框中添加一列，说明每行来自哪个工作表名称？ Python

为啥我的页面在刷新期间会在 Chrome 中触发“就绪”事件？

如果Chrome打印预览到达页面的下边距，则会在中间切断文本

有一个带有链接 Javascript 的 HTML 文档我试图在单击提交按钮时添加一条警报消息。我该怎么做呢？