Question

我有一个使用modernizr.js的页面和一个自定义的ajax函数，每x秒重新加载页面内容。这是触发函数的代码。

function reloadSlides() {
    jQuery.ajax({
        url: document.location.href,
        cache: true,
        success: function(html){
            jQuery('#main').html(html);
        }
    });
}

当我查看DOM检查器时，类开始在HTML标记中反复重复，如下所示：

html lang =“de”class =“js no-touch cssanimations csstransitions js no-touch cssanimations csstransitions js no-touch cssanimations csstransitions js no-touch cssanimations csstransitions js no-touch cssanimations csstransitions js no-touch cssanimations csstransitions”style = “”

为什么？我怎么能避免这个？

感谢您的期待！

Answer 1

在我看来，你正在重新加载id为main的元素内的整个页面。

jQuery('#main').html(html);

这是将所有重新加载的html并将其填充到所选元素中。尽量只重新加载main中的内容而不是所有内容。

Answer 2

根据对该问题的评论：

使用jQuery.load函数，您可以请求整页并为特定元素添加选择器：

$('#main').load(url + ' #main', function() { /* something... */});

它会将请求中收到的内容自动放入您的#main元素中。有关详细信息，请参阅文档：http://api.jquery.com/load/

Answer 3

如何添加这些类？

通过您正在使用的javascript动态添加类。

也发生在我身上

我也使用了一些javascripts，这导致一些类在DOM中注入，或者在html标记中精确注入。这是因为每次加载javascript时js都会执行并根据屏幕，页面和其他一些因素添加类。

布局文件中的

JS

您可能在布局文件中附加了js。因此，每次向页面发送ajax请求时，js文件都会被执行并再次添加该类。因为它是根据您使用的输出或输入设备更新类; class="no-touch"这个类被添加，因为你没有附加任何触摸输入，如果你有（触摸屏液晶显示器），那么该类将有其他东西。

JS文件的使用和本

的补救措施

这完全取决于JS的使用方式。

我自己使用js并将它们添加到我的html标签中，他们需要添加它以便在将来使用它时使用它。但是在每次加载页面的同时，我删除了布局，以便js不再被执行。

这样可以防止这种情况一次又一次地发生。

Answer 4

简单的方法是在运行新的html代码之前删除类。

function reloadSlides() {
jQuery.ajax({
    url: document.location.href,
    cache: true,
    success: function(html){
        jQuery("html").removeClass("js no-touch cssanimations csstransitions");
        jQuery('#main').html(html);
    }
});

但这并没有真正解决问题。您必须找出，JS的哪一部分正在添加这些类并将其放入html代码的静态部分。我可能会使用Fileseek并搜索类名来查找JS。

Answer 5

这里有几个可行的答案，但没有一个简洁地解释问题的根源。

这里的问题是您要求整个页面并将整个页面标记重新插入到页面上的子元素中以进行每次重新加载。

您可以使用客户端javascript过滤掉返回的html内容，但它首先破坏了AJAX的效率优势。更优选的是仅请求您需要的内容，从而节省带宽和服务器处理开销等。

这通常是通过向当前页面请求添加查询字符串参数来告诉服务器您正在进行ajax刷新请求，因此响应不应包含所有out page markup / scripts / etc以及主要内容

例如，您可以将查询字符串参数（如&ajax=main）添加到当前页面网址，服务器端会告诉您的代码不要返回完整的呈现页面，而只返回main的内容页面元素。当然，您需要修改服务器端页面代码来处理这个问题。

这样，您不应该在每次刷新时重新执行modernizr代码。这样可以节省服务器资源并加快浏览器中的客户端体验。

这是一篇关于manipulating the query string with jQuery的热门帖子。你可以在没有jquery的情况下做一个简单的追加，但是该帖子中推荐的jquery插件只处理了很多查询字符串处理的边缘情况。

您可以做一些简单的测试来验证：

在firebug或chrome开发人员工具中观察对每个刷新请求的响应。检查响应，看它是否包括整个页面，包括标题，脚本等。
计算已完成的刷新请求数，并记下与来自modernizr的标记上的重复类数量的相关性。

服务器端部分视图呈现的确切实现将根据您的服务器技术堆栈而变化（即：对于不同的服务器后端不同 - 所以现在您自己的搜索知道该怎么做）

modernizr和ajax加载冲突

5 个答案:

如何添加这些类？

也发生在我身上

JS

JS文件的使用和本