瀏覽器無法識別包含外部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文件

回答

相關問題