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

在我的动态Web项目（Eclipse）中，使用Spring MVC框架开发的，我具有下面的JSP页面，放置在文件夹WEB-INF/jsp /：浏览器无法识别包含外部javascript/jquery文件

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

我的问题是很明显的应用程序不被读取的js/index.js文件，放置在文件夹的WebContent/JS（的css文件，放置在的WebContent/CSS，通常读取）。当我在JSP页面中直接放入一些javascript/jquery代码（如问题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>

随着单方面作风=“左：183px;顶部：111px;“onMouseDown =”dragStart（event，'results'）;“负责移动弹出屏幕（请参阅问题how to drag and drop a <div> across the page）

来源

2014-03-03 Kleber Mota

您有'JS/index.js' ......相对文件路径所以它会被加载相对于包含js的页面的位置而言。如果您使用Fiddler2或其他工具来观看流量，那么该文件将会出现404错误。 –

如果您使用的是Chrome或Firefox（或IE 9+），则浏览器内的开发工具会有一个网络面板，该面板将显示浏览器加载文件的错误。 Chrome：https：//developers.google.com/chrome-developer-tools/docs/network#network_resource_details Firefox：https：//developer.mozilla.org/en-US/docs/Tools/Network_Monitor IE：http：// blogs.msdn.com/b/ie/archive/2010/04/22/ie9-developer-tools-network-tab.aspx – HJ05

我使用Firefox的网络监视器查看文件加载过程中可能出现的任何错误，并且我可以验证所有文件加载正确，包括index.js。通过这种方式，我找不出为什么代码不工作（在问题中添加了index.js的内容）。 –

我不完全确定，但我想我'见过此之前完成。删除您的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>

这可能无法正常工作，它仅仅是一个想法我有

来源

2014-03-03 17:10:32 theonlygusti

他们特别声明这是index.js文件没有加载...... –

就像你的参考一样，这样做的原因是因为它允许文件退回到页面的协议。例如，如果页面加载了“https：//”，那么js文件将被加载“https：//”。如果文件被硬编码为'http：//'，那么即使页面是通过https：//协议获取的，该文件也可以通过http：//协议获取。 [这里]（http://stackoverflow.com/questions/14832705/why-is-there-no-protocol-specified-for-this-facebook-script-tag）是一个整洁的小参考。 – War10ck

我遵循你对这两个内容的理解，并且直接放置在页面中的代码继续工作，并且外部JavaScript仍然不起作用。 –

尝试<script src="/js/index.js"></script>代替。。

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

一旦你在浏览器中运行你的JSP（右击 - 查看页面源代码或类似的东西，取决于你的浏览器），我会建议你查看源代码。您应该看到该页面尝试加载的JS的URL，并且应该能够相应地进行更正。

此外，也许这只是您的上下文路径丢失的URL。在这种情况下，我会在生成URL时使用<c:url>标记。

来源

2014-03-03 17:10:47 eagerMoose

我尝试过，但仍然无法使用。我真的认为是非常奇怪的CSS正在加载和JavaScript不，因为两者都使用相同的符号。我不明白为什么将代码直接放在jsp页面中，而包含外部JavaScript不起作用。 –

虽然这可能会回答这个问题，但如果您可以添加关于如何以及为何回答问题的解释，那会更好。 – apaul

这不是最好的解决办法，但你可以jQuery.load什么的动态负载尽量像脚本

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

来源

2014-03-03 17:30:09 user1809655

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

回答

相关问题