jquery、jquery-ui 和 bootstrap 的 CSS 和 Javascript 顺序答案

【问题标题】：CSS and Javascript order for jquery, jquery-ui and bootstrapjquery、jquery-ui 和 bootstrap 的 CSS 和 Javascript 顺序
【发布时间】：2016-06-30 19:06:27
【问题描述】：

在我的本地和内部（可在公司网络内访问）服务器上，jquery-ui 滑块显示在所有页面上，但是，在我们的外部服务器上（外部客户在公司外部），滑块不会显示在任何页面上页面。

最初，我将所有 jquery 文件指向 googelapis.com CDN。我认为这可能是问题所在，所以我将所有文件复制到本地目录并指向页面上的这些文件。滑块仍然无法正常工作。

我现在想知道文件是否需要特定的顺序才能看到它们。我了解到 javascript 文件应该放在页面底部（除非 DOM 布局需要它们），并且 .css 文件总是放在头部。但是，我在 SO Script order for jquery with bootstrap 上看到了一个线程，其中 jquery.js、jquery-ui.js 和 bootstrap.js 与自定义 .js 文件和 .css 文件一起位于 <head> 标记中。由于 OP 将此答案作为解决方案进行了检查，因此我将尝试重新排序我的文件以查看是否可以解决我的问题。

问题：我应该什么时候将js文件放在<head>，尤其是jquery和bootstrap JS文件？如果我需要这样做，我只会在使用滑块的页面上使用这种重新排序，因为我不确定这种重新排序将如何影响网站的其余部分。

另外，我想知道为什么我们的外部服务器不显示滑块，但我的本地 (xampp) 以及我们的内部服务器确实显示滑块 - 我根本不必重新排序它们。有人遇到过这个问题吗？

截图：

本地/内部服务器视图

外部服务器视图

这是我文件的当前顺序：

<head>
  <link rel="stylesheet" href="css/jquery-ui-1-11-4.min.css">
  <link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.structure.css">
  <link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.theme.min.css">

  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-custom.css">

  <link rel="stylesheet" href="css/styles.css">
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link rel="stylesheet" href="css/ie10-surface-vp.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <!-- Custom styles for this template -->
  <link rel="stylesheet" href="css/navbar-fixed-top.css">

</head>


<!-- body content here -->



<!-- before end body -->
<script src="js/jquery-1-11-3.min.js"></script>
<script src="js/jquery-ui-1-11-4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-toggle-2-2-2.min.js"></script>

【问题讨论】：

您在比较内部/外部时是否使用相同的浏览器？我建议在测试时使用 Chrome Incognito。 IE 会因为缓存而毁了你的生活。
感谢您的建议，FirebladeDan。是的，我在内部和外部都使用 Chrome。滑块未显示为外部。刚刚在我的手机上试了一下。我将在外部尝试隐身模式，但滑块需要以任何 chrome 模式显示，以便我们的外部客户端查看。
我的猜测是 css 文件可能存在冲突。你的 js 展示位置对我来说很好。
@Radmation 我会检查的。该订单在其他服务器上运行良好，而不是在我们的外部服务器上运行良好，真是太疯狂了。我也没有从我们的 SA 那里得到任何答复 :(
@Radmation +1 建议 css 冲突。

标签： javascript jquery twitter-bootstrap server slider

【解决方案1】：

引导程序documentation 建议将 JS 放在 HTML 文件的末尾。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

【讨论】：

我也会检查文档。将 .js 文件放在底部是我的惯常做法，但想知道将它们放在 <head> 中的边缘情况适用于...

【解决方案2】：

已修复。我将 css 文件重新排序为：

<link rel="stylesheet" href="css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/bootstrap-custom.css" >
    <link rel="stylesheet" href="css/jquery-ui-1-11-4.min.css">
    <link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.structure.css" >
    <link rel="stylesheet" href="css/jquery-ui-1-11-4-smoothness.theme.min.css">

滑块现在显示在内部、本地和外部页面上。我不知道为什么一开始我在引导文件下有 jquery-ui。

另外，在另一个页面上，我在控制台中收到此错误：

 **Mixed Content**: The page at 'https://qa1.xxx.com/siteorg/addpayment' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'. This request has been blocked; the content must be served over HTTPS.

所以我用本地保存的文件替换了这个链接，以避免协议冲突。

我没有更改 JS 文件的顺序（将它们放在 head 中），即使这似乎适用于我的问题中列出的其他 SO 帖子。

【讨论】：