浏览器无法识别包含外部 javascript/jquery 文件

Question

在我使用 Spring MVC 框架开发的动态 Web 项目 (Eclipse) 中，我有下面的 JSP 页面，放在文件夹 WEB-INF/jsp/ 中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>HorarioLivre</title>

  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script src="js/index.js"></script>

  <link rel="stylesheet" href="css/style-main.css">
  <link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
  <header>
    <div class="container">
      <h1><a href="#">HorarioLivre</a></h1>
      <nav>
        <ul>
          <li><a href="listagem_evento.html" class="icon evento">Eventos</a></li>
          <li><a href="cadastra_horario.html" class="icon horario">Cadastrar Horarios</a></li>
          <li><a href="listagem_horario.html" class="icon horario">Listar Horarios</a></li>
          <li><a href="listagem_usuario.html" class="icon usuario">Usuarios</a></li>
          <li><a href="#">${usuario.nome}</a>
            <ul>
                <li><a href="usuario_perfil.html" class="icon perfil">Perfil</a></li>
                <li><a href="usuario_config.html" class="icon settings">Configura&ccedil;&otilde;es</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="results">
        <a href="#" id="close">Fechar</a>
        <div id="content"></div> 
  </div>  
</body>
</html>

我的问题是应用程序显然没有读取放置在文件夹 WebContent/js 中的 js/index.js 文件（放置在 WebContent/css 中的 css 文件可以正常读取）。当我将一些 javascript/jquery 代码直接放在 JSP 页面中时（如问题 Browser doesn't recognize javascript / jquery code 中显示的代码），它们执行时没有任何问题。

有人能找到这个页面的问题吗？

更新 1

$(document).ready(function(){
   setupPopup();
});

function setupPopup() {
   $('a').click(function() {
       $('#content').load($(this).attr('href'));
      $('#container').append('<div id="cover">');
      $('#results').fadeIn(500);
      popupPosition();
   });

   $('#close').click(function() {
      $('#results').fadeOut(100);
      $('#cover').remove();
   });

   $(window).bind('resize', popupPosition);
}

function popupPosition() {
   if(!$("#results").is(':visible')){ return; }

   $("#results").css({
      left: ($(window).width() - $('#results').width()) / 2,
      top: ($(window).width() - $('#results').width()) / 7,
      position:'absolute'
   });

   $('#results').draggable();
}

最终更新

最后，我选择不使用jquery，并用这个替换标题中的代码：

<script>
  function handleClick(url){
      document.getElementById("results").style.display = 'block';
      document.getElementById("content").innerHTML='<object type="text/html" data="'+url+'" ></object>';
      }
  function cleanDiv() {
      document.getElementById("results").style.display = 'none';
      document.getElementById("content").innerHTML=' ';
  }
  </script>

每个链接都有这种格式：

<a href="#" onclick="handleClick('listagem_evento.html')" class="icon evento">Eventos</a>

我的弹出窗口的 html 代码得到这个表单：

<section class="about" id="results" style="left: 183px; top: 111px;" onMouseDown="dragStart(event, 'results');">
    <div align="right"><a href="#" class="classname" onclick="cleanDiv()">X</a></div>
    <div id="content" align="center"></div>
  </section>

与方style="left: 183px; top: 111px;" onMouseDown="dragStart(event, 'results');" 负责在屏幕上移动弹出窗口（见问题how to drag and drop a <div> across the page）

Answer 1

我不完全确定，但我想我以前见过这样做： 从您的 js 源中删除 http: 和 https:。所以它应该是这样的：

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

这可能行不通，这只是我的一个想法。

Answer 2

这不是最好的解决方案，但您可以尝试使用 jQuery.load 或类似的方式动态加载脚本

<script>document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

Answer 3

改用<script src="/js/index.js"></script>。

编辑：这个Absolute path & Relative Path 更详细地解释了相对路径和绝对路径。

我建议您在浏览器中运行 JSP 后查看源代码（右键单击 - 查看页面源代码或类似内容，具体取决于您的浏览器）。您应该看到页面尝试加载的 JS 的 URL，并且应该能够相应地更正它。

另外，可能只是 URL 中缺少您的上下文路径。在这种情况下，我会在生成 URL 时使用<c:url> 标签。