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

Question

In my Dynamic Web Project (Eclipse), developed with the Spring MVC framework, I have the JSP page below, placed in the folder WEB-INF/jsp/ : 在我使用Spring MVC框架开发的Dynamic Web Project（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>

My problem is that apparently the application don't be reading the js/index.js file, placed in folder WebContent/js (the css files, placed in WebContent/css, are read normally). 我的问题是，显然该应用程序没有读取放置在WebContent / js文件夹中的js / index.js文件（放置在WebContent / css中的css文件可以正常读取）。 When I put some javascript / jquery code directly in the JSP page (like the code displayed in the question Browser doesn't recognize javascript / jquery code ), they are executed without any problems. 当我直接在JSP页面中放置一些javascript / jquery代码时（例如在问题浏览器中显示的代码无法识别javascript / jquery代码），它们的执行没有任何问题。

Someone can find the problem with this page? 有人可以找到此页面的问题吗？

Update 1 更新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();
}

FINAL UPDATE 最后更新

In the end, I choose don't use jquery, and replace the code from the header by this: 最后，我选择不使用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>

each link has this format: 每个链接具有以下格式：

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

and the html code for my popup window get this form: 我的弹出窗口的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>

With the parte style="left: 183px; top: 111px;" 使用parte style =“ left：183px; top：111px;” onMouseDown="dragStart(event, 'results');" onMouseDown =“ dragStart（event，'results'）;” being responsible for move the popup across the screen (See the question how to drag and drop a <div> across the page ) 负责在屏幕上移动弹出窗口（请参阅如何在页面上拖放<div>的问题）

Answer 1

I'm not entirely sure, but I think i've seen this done before: remove http: and https: from your js sources. 我不确定，但我想我之前看过这件事https:从您的js来源中删除http:和https: :。 So it should look like this: 所以它应该看起来像这样：

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

This might not work, it was just a thought I had. 这可能行不通，这只是我的想法。

Answer 2

Try <script src="/js/index.js"></script> instead. 尝试使用<script src="/js/index.js"></script> 。

edit: This Absolute path & Relative Path explains the relative and absolute path in more detail. 编辑：此绝对路径和相对路径更详细地说明了相对路径和绝对路径。

I would suggest viewing the source code once your run your JSP in browser (right click - view page source or something similar, depending on your browser). 我建议您在浏览器中运行JSP后查看源代码（右键单击-查看页面源代码或类似内容，具体取决于您的浏览器）。 You should see what URL for the JS the page is trying to load and should be able to correct it accordingly. 您应该看到该页面正在尝试加载的JS URL，并且应该能够相应地对其进行更正。

Also, perhaps it's just your context path missing from the URL. 另外，也许只是URL中缺少上下文路径。 In that case, I'd use <c:url> tags when generating the URL. 在这种情况下，我将在生成URL时使用<c:url>标记。

Answer 3

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

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

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

问题描述

3 个解决方案

解决方案1
0 2014-03-03 17:10:32

解决方案2
0 2014-03-03 17:10:47

解决方案3
0 2014-03-03 17:30:09

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

问题描述

3 个解决方案

解决方案1 0 2014-03-03 17:10:32

解决方案2 0 2014-03-03 17:10:47

解决方案3 0 2014-03-03 17:30:09

解决方案1
0 2014-03-03 17:10:32

解决方案2
0 2014-03-03 17:10:47

解决方案3
0 2014-03-03 17:30:09