Javascript在本地和服务器上的行为不同

Javascript acts different locally and on a server

本文关键字：服务器 Javascript      更新时间：2023-09-26

所以我正在开发一个有很多html页面的网站，现在我在JavaScript方面遇到了一个问题，这真的让我很困惑。问题是我的网站在本地运行得很好，但当我在服务器上托管它时，一些JavasScript代码停止工作(有时它能工作(，有趣的是，当检查它时，我没有得到任何控制台JS错误，更有趣的是不工作的JS与其他工作的JS代码在同一个.JS文件中。此外，在本地，一切都能100%工作。问题是，当我在服务器上托管它时，我的移动媒体查询dropwdown菜单JS停止了wroked——最初的代码看起来是这样的：

$(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文件(execptindex.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中，而另一个UL仅在所有其他媒体查询中出现，但这并不重要。

重要的是要想出一个解决方案，让所有3个javascript代码在服务器上和谐地协同工作。同样也很高兴听到，当本地一切都很好，而在服务器上，Javascript代码午餐计数似乎不同。。。

更新：我可以确认，当我重新加载我所在的页面时，100%的时间都会导致下拉菜单停止工作。此外，从浏览器检查>网络>html中，我可以看到1xheader.html和1xfooter.html从200(当下拉菜单工作时(变为304(下拉菜单停止工作(。

根据这个问题，我敢打赌您在jQuery的.load()函数中看到了奇怪的缓存行为。尝试添加

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

在进行任何load调用之前，请先将其添加到脚本中。

问题是.htaccess文件重定向到我的另一个外观相同的测试网页。

相关文章：