如何在 JSP 页面中包含外部 JS 文件答案

【问题标题】：How include an external JS file in a JSP page如何在 JSP 页面中包含外部 JS 文件
【发布时间】：2014-02-28 23:30:41
【问题描述】：

我有一个 spring mvc 应用程序，在我的主页中，我需要使用一个 javascript 文件。我尝试以这种方式包含文件：

<script type="text/javascript" src="js/index.js"></script>

但是当我运行应用程序时，系统行为似乎没有运行脚本。 T 也试试这个：

<script type="text/javascript" src="<c:url value='js/index.js'/>"></script>

但结果是一样的。有人知道为什么会这样吗？

ps.：我的页面的整个代码是：

<!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 type="text/javascript" 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="usuario_logoff.html" class="icon logout">Sair</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="results">
        <a href="#" id="close">Fechar</a>
        <div id="content"></div> 
  </div>
</body>
</html>

脚本应该在弹出窗口中打开我的子页面，但它们正在浏览器窗口中打开。

** 更新 1 **

我的 index.js 是：

$(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();
}

【问题讨论】：

你明白了吗？

标签： javascript jsp

【解决方案1】：

但是当我运行应用程序时，系统行为似乎没有脚本正在运行。

这是因为浏览器无法从指定位置加载 javascript 'index.js'。如果您打开浏览器控制台并转到“网络”选项卡，您将看到 404（找不到资源）。您不能以这种方式在 JSP 文件中指定 JavaScript 的相对 URL。

您需要提供您的文件夹结构（index.js 在您的项目中的位置）以及您如何配置 web.xml。但是，如果您尝试以下方法，它肯定会起作用：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/index.js"></script>

然后将包含“index.js”的“js”文件夹与“WEB-INF”保持在同一级别。

【讨论】：

【解决方案2】：

检查索引文件的路径，然后确保代码正确。我假设js是一个文件夹。发布index.js代码。

【讨论】：

文件 index.js 位于名为 js 的文件夹中，位于文件夹 WebContent 中。在同一个文件夹中，有我的文件夹 WEB-INF，它位于我的 jsp 页面，在我的项目中由 Spring MVC 的 DispatcherServlet 引用，与我的应用程序中的所有其他页面相同（包括从此页面链接的页面） .无论如何，我将从我的 javascript 代码中添加代码。
将索引文件与 jsp 放在同一文件夹中，并编辑到以确保路径不是问题。
好的，我尝试将 indes.js 与 jsp 放在同一个文件夹中，并放在我的 WebContent/ 中的文件夹 js/ 中（我正在从 eclipse 开发一个动态 Web 项目），但它们都不是在职的。奇怪的部分是我删除了这些行：并在代码中直接包含一个javascript函数，脚本就正常执行了。
把从 210.min.js 和 ajax....我正在使用 jquery 函数开发一个网站，因为我将 jquery 链接放在了 head 标签的底部，所以没有任何工作：D.Just try it and tell me.顺便说一下，我不熟悉 jqeury，所以我不知道 index.js 代码是否正确。
但这就是问题所在：此时，我拥有更新 4 的代码，但无法正常工作。我说的是当我删除这些行并将一些javascript代码直接放在jsp页面中时（例如：，代码可以正常工作；但是当我包含外部文件时，就不行了。

【解决方案3】：

希望为其他人节省半小时解决此问题的时间，VHS 的答案需要为已升级到雅加达的任何人更新。引用需要是：<script type="text/javascript" src="${jakarta.servlet.jsp.PageContext}/js/index.js"></script>

【讨论】：

您的代码未显示。请编辑您的答案并在预览中验证。