如何在 JSP 页面中包含外部 JS 文件 [英] How include an external JS file in a JSP page

查看：31
本文介绍了如何在 JSP 页面中包含外部 JS 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 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.:我页面的全部代码是:

<html lang="zh-cn"><头><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"><身体><标题><div class="容器"><h1><a href="#">HorarioLivre</a></h1><导航><ul><li><a href="listagem_evento.html" class="icon eventto">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></nav>

</标题><div id="结果"><a href="#" id="close">Fechar</a><div id="内容"></div>

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

** 更新 1 **

我的 index.js 是:

$(document).ready(function(){设置弹出()；});函数 setupPopup() {$('a').click(function() {$('#content').load($(this).attr('href'));$('#container').append('<div id="cover">');$('#results').fadeIn(500);弹出位置()；});$('#close').click(function() {$('#results').fadeOut(100);$('#cover').remove();});$(window).bind('resize', popupPosition);}函数 popupPosition() {if(!$("#results").is(':visible')){ return;}$("#results").css({左: ($(window).width() - $('#results').width())/2,顶部: ($(window).width() - $('#results').width())/7,位置:'绝对'});$('#results').draggable();}

解决方案

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

这是因为浏览器无法从指定位置加载 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"保持在同一级别.

I have an spring mvc app where in my main page, I need use an javascript file. I try include the file this way:

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

but when I running the application, the system behavior seems like no script is running. T also try this:

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

but the result was the same. Someone have any idea why this is happening?

ps.: the entire code of my page is:

<!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>

The script should open my subpages in a pop-up windows, but they are being opened in the browser window.

** UPDATE 1 **

My index.js is:

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

解决方案

but when I running the application, the system behavior seems like no script is running.

This is because the browser is unable to load the javascript 'index.js' from the specified location. If you open the browser console and go to the 'networks' tab, you will see 404 (resource not found) against it. You cannot specify a relative URL to a JavaScript in a JSP file that way.

You need to provide your folder structure (where index.js is located in your project) and how you have configured web.xml. But if you try the following, it will surely work:

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

And then keep the 'js' folder containing 'index.js' at the same level as 'WEB-INF'.

这篇关于如何在 JSP 页面中包含外部 JS 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆