Question

Chrome开发工具的屏幕截图： Screenshot from Chrome Dev Tools

我想知道，正如问题所说：为什么我的CSS资产被jQuery获取？

CSS表格正如您通常所包含的那样; <link rel="stylesheet">标记中的<head>。然后将jQuery和jQueryUI作为正文中的最后一件事。

当我转到相应的行（6128）时，它显示了函数curCSS ..我无法真正找到它的任何内容，只是它被jQueryUI和被剥夺了。

jQuery         v1.11.1
Google Chrome  v39.0.2171.65 (64-bit)

EDIT1：

这些资产是jQueryUI使用的。它们只是我内容的一些背景图片和字体。

EDIT2：

我已经评论了jQueryUI，重新加载了页面（ Ctrl + F5 ），现在它们仍然被加载，但现在有了第3580行的东西。

**jQuery.js snippet removed for brevity**

当我注释掉jQuery时，它们也会正常加载。

EDIT3：

澄清为什么我只加载了jQuery + UI而没有其他脚本：
我在我的基本模板中包含了jQuery + UI，并且我加载了另一个根本没有使用jQuery的页面。我去调试那个页面，发现jQuery做了很奇怪的事情：P

这是最不可能的标记：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Pagetitle</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>

    <link rel="stylesheet" href="css/jquery-ui.min.css"/>
    <link rel="stylesheet" href="css/fonts.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <div style="font-family: ArialNarrowBold">CONTENT</div>

    <script type="text/javascript" src="js/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/jquery/jquery-ui.js"></script>
</body>
</html>

现在Chrome开发工具看起来像这样：

Chrome devtools 2

ArialNarrowBold字体位于fonts.css。正如您所看到的，除了包含jQuery和jQuery-UI之外，我在页面上没有进一步的脚本。即使我拿出jquery-ui.min.css这也保持不变。

即使我在style块中加载字体，jQuery仍然希望自己加载它。

<style type="text/css">
    @font-face {
        font-family: 'ArialNarrowBold';
        src: url('fonts/ArialNarrowBold.eot');
        src: url('fonts/ArialNarrowBold.eot?#iefix') format('embedded-opentype'),
             url('fonts/ArialNarrowBold.woff') format('woff'),
             url('fonts/ArialNarrowBold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
</style>

Answer 1

这绝对是Chrome Devtools的回归。我只是使用Chrome Canary和Chromium双重检查，我无法在任何一个浏览器上复制这种情况。您一定要报告此问题：https://support.google.com/chrome/answer/95315?hl=en

在您提交错误报告之前，请检查您是否使用的是最新版本的Chrome，如果没有，请查看是否有帮助。

Answer 2

当我使用jquery添加一些图像src属性时，我得到了同样的结果。如果您发现写入该信息的列是“发起人”：

Chrome console network

Chrome似乎会在该列中跟踪导致请求开始的脚本。也许你正在加载一些带有jquery的html，里面有css，或者没有css的linkend的任何资产。

示例：

$(img).attr('src', 'image.png');

//OR
$(div).load('/load/index.html');

会在Chrome控制台上产生这种信息。

Answer 3

尝试在Firefox上打开网站，然后在那里查看。如果那个数字说：＆＃34; jQuery＆＃34;，那将是世界末日。但是，如果说什么＆＃34;什么都没有＆＃34;，可能是Chrome上的一个问题。举报！

Answer 4

你在页面上使用jQuery，对吗？否则你为什么要加载呢？

请包含尽可能多的标记，尤其是jQuery的任何使用（内联，脚本标记等）

您是否正在进行AJAX调用......您经常会将此类事情视为回应。
AJAX JSONP怎么样？
您使用的是Ruby吗？
- 如果是这样......您使用 .js.erb个文件吗？ - 我已经看到，当从页面上的AJAX调用中从服务器返回.js.erb文件并且返回的JavaScript直接注入页面并运行时，会发生这种情况。

为什么jQuery用于获取CSS资产？

EDIT1：

EDIT2：

EDIT3：

4 个答案: