2016-08-20 30 views
1

,所以我開發了許多HTML頁面的網站上和現在我有JavaScript的問題,真正困擾我。事情是我的網站在本地工作得很好,但是當我將它託管在服務器上時,一些JavasScript代碼會停止工作(有時會起作用),並且有趣的是,當檢查它時,我沒有得到任何控制檯JS錯誤以及什麼更有趣的是,不工作的JS與其他工作的js代碼在同一個.js文件中。而且,本地所有工作都是100%。 那麼,問題是,我的手機媒體查詢dropwdown菜單JS停止wroked當我託管在服務器上 - 原來的代碼是這樣的:的JavaScript行爲不同本地和服務器

$(function(){ 
    $(document).mousedown(function(){ 
     $('.dropdown .active').removeClass('active').children('ul').hide(); 
    }); 
    $('.dropdown').on('mousedown','.subMenu', function(e){ 
     e.stopPropagation(); 
     var elem = $(this); 
     if(elem.is('.active')) { 
      elem.children('ul').slideUp(150); 
      elem.removeClass('active'); 
     } else { 
      $('.dropdown .active').removeClass('active').children('ul').hide(); 
      elem.addClass('active').children('ul').slideDown(150); 
     } 
    }); 
    $('.subMenu').on('mousedown','ul', function(e){ 
     e.stopPropagation(); 

    });  
}); 

$("#footer").load("footer.html"); 
$("#header").load("header.html"); 

正如你可以看到我使用單獨的頁腳和頁眉的html文件並使用JS將它們上傳到我的頁面。 <div id="header"></div>這工作完美的地方,但是當我託管它到服務器我的手機下拉有時工作,有時不......看起來,我設法使JavaScript的工作以更好的成功率編輯它到這個:

$(document).ready(function() { 
$(function(){ 
    $(document).mousedown(function(){ 
     $('.dropdown .active').removeClass('active').children('ul').hide(); 
    }); 
    $('.dropdown').on('mousedown','.subMenu', function(e){ 
     e.stopPropagation(); 
     var elem = $(this); 
     if(elem.is('.active')) { 
      elem.children('ul').slideUp(150); 
      elem.removeClass('active'); 
     } else { 
      $('.dropdown .active').removeClass('active').children('ul').hide(); 
      elem.addClass('active').children('ul').slideDown(150); 
     } 
    }); 
    $('.subMenu').on('mousedown','ul', function(e){ 
     e.stopPropagation(); 

    });  
}); 
}); 
$("#footer").load("footer.html"); 
$("#header").load("header.html"); 

還有一重要的事情 - 每個HTML文件(execpt的index.html)有一個內部的JavaScript代碼,給出了一個特定的ID元素的類,它突出在其上的用戶是在頁面的名稱(按鈕)。它看起來是這樣的。:

 <script> 
    $("#header").load("../pages/header.html", function() { 
     document.getElementById('A_57').className = 'about'; 
     document.getElementById('A_577').className = 'about'; 
    }); 
     $("#footer").load("../pages/footer.html", function() {  
    }); 

     </script> 

在這種情況下,它的目標有兩個ID,因爲一個ID是在UL,只有apears移動視圖和其他UL只有在其他所有媒體查詢apears,但是這並不重要。

重要的是要拿出一個解決方案,所有的javascript 3碼上下一心的服務器上。也將是很好聽,而當地一切正常,看來Javascript代碼共進午餐記數不同的服務器上的微細而...

更新:我可以確認的是,當我重新加載一個網頁,我是在它100%下拉菜單的時間結果停止工作。另外從瀏覽器檢查>網絡> HTML我可以看到,1xheader.html和1xfooter.html從200(當下拉菜單工作)變成304(下拉菜單停止工作)。

+1

瀏覽器控制檯中的任何錯誤?您能否在瀏覽器的網絡標籤中看到HTML文件的請求? – jedifans

+0

沒有錯誤,但瀏覽器中的HTML請求讓我知道發生了什麼。我第一次去頁面獲取header.html的2個請求和footer.html的2個請求(一切正常) - 所有200個代碼(確定)。但是當我重新加載頁面,我得到相同數量的請求2x頭和2x頁腳,但1x頭和1xfooter現在有304代碼(未修改),這次下拉菜單不起作用。 Jedifans感謝你我們正在做的事情! – Mkey

+0

我不確定這是不是一件事,但在您的服務器中啓用了JavaScript?你的MIME類型是不是'.js'? –

回答

0

的問題是它被重定向到我的另一個測試網頁時有相同的外觀.htaccess文件。

0

根據this question,我敢打賭,你會發現jQuery的.load()函數存在奇怪的緩存行爲。嘗試將

$.ajaxSetup ({ 
    // Disable caching of AJAX responses 
    cache: false 
}); 

添加到您的腳本,然後再進行任何load調用。

相關問題