如何在JSP页面中包含外部JS文件 [英] How include an external JS file in a JSP page
问题描述
我有一个spring mvc app，在我的主页面中，我需要使用一个javascript文件。我尝试以这种方式包含文件：
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>
但是当我运行应用程序时，系统行为似乎没有运行脚本。 T也试试这个：
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：我的页面的整个代码是：
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çõ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.
**更新1 **
我的index.js是：
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.
这是因为浏览器无法从指定位置加载javascript'index.js'。如果您打开浏览器控制台并转到网络选项卡，则会看到404（未找到资源）。您不能以这种方式指定JSP文件中JavaScript的相对URL。
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.
您需要提供文件夹结构（index.js位于项目中）和你是如何配置web.xml的。但如果您尝试以下操作，它肯定会起作用：
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 / javascriptsrc =$ {pageContext。 request.contextPath} /js/index.js>< / script>
然后保持'js'文件夹包含' index.js'与'WEB-INF'处于同一级别。
And then keep the 'js' folder containing 'index.js' at the same level as 'WEB-INF'.
这篇关于如何在JSP页面中包含外部JS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
