modernizr和ajax负载冲突

modernizr and ajax load conflict

本文关键字：冲突 负载 ajax modernizr      更新时间：2023-09-26

我有一个使用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 csstrainations js no touch cssanimationsjs no touch cssanvations csstranations js notouch cssan imations csStranations jss notouch cssanimations"style="

为什么？我该如何避免这种情况？

谢谢你的光临！

在我看来，您正在将整个页面重新加载到id为main的元素中。

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

这将获取所有重新加载的html，并将其填充到所选元素中。尝试只重新加载main内部的内容，而不是所有内容。

根据对问题的评论：

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

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

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

这些类是如何添加的

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

也发生在我身上

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

布局文件中的JS

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

JS文件的使用及补救措施

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

我自己使用js，他们将类添加到我的html标签中，他们需要添加这些类，以便将来在您使用他们的API时使用它。但在每次加载页面的同时，我都会删除布局，这样js就不会再次被执行。

这将防止这种情况一次又一次地发生。

简单的方法是在运行新的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。

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

这里的问题是，您正在请求整个页面，并在每次重新加载时将整个页面标记重新插入到页面上的子元素中。

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

这通常是通过在当前页面请求中添加一个查询字符串参数来告诉服务器您正在进行ajax刷新请求来实现的，因此响应不应该包括所有的页面外标记/scripts/etc，而应该只包括主要内容。

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

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

下面是一篇关于使用jQuery操作查询字符串的流行文章。您可以在不使用jquery作为简单附加的情况下完成此操作，但该文章中推荐的jquery插件只处理了querystring处理的许多边缘情况。

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

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

服务器端部分视图渲染的确切实现将根据您的服务器技术堆栈而有所不同（即：不同的服务器后端不同-所以现在您知道该做什么了，就可以自己搜索）

相关文章：