jquery - 使用 jQuery 是否可以包含基于屏幕分辨率的文件？

Question

我正在开发的一个网站使用 CSS 中的媒体查询来根据屏幕尺寸调整布局。

该网站正在利用 Google Ads 来帮助获利。

如果我没猜错的话，我可以使用 Google AdSense 提供的自适应广告单元。

我的想法是创建两个包含文件(google-300x250.html 和 google-320x50.html)，并根据当前屏幕分辨率包含其中一个。

还有其他人尝试过实现类似的东西吗？您使用了哪些技术来实现此目的？

如果我击败某人找到解决方案，我将编辑我的问题/帖子以包含我的解决方案。

提前谢谢大家。

Answer 1

这将从指定文件中获取 HTML 并将其加载到容器中:

$(window).on('load', function () {
    if ($(this).width() > 320) {
        $('#my-container').load('google-320x50.html');
    } else {
        $('#my-container').load('google-300x250.html');
    }
});

这是如果您使用 iframe 来显示外部页面。您需要做的就是更新 iframe 的源:

$(window).on('load', function () {
    if ($(this).width() > 320) {
        $('#my-iframe').attr('src', 'google-320x50.html');
    } else {
        $('#my-iframe').attr('src', 'google-300x250.html');
    }
});

这些代码块使用 320px 作为显示一个版本或另一个版本的断点。另外，如果您还想支持窗口大小调整，您可以更改代码以在 window.resize 事件而不是 window.load 事件上运行，但您应该限制这样它就不会运行得太频繁。

例如:

var timer   = null;
$(window).on('load', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        if ($(this).width() > 320) {
            $('#my-container').load('google-320x50.html');
        } else {
            $('#my-container').load('google-300x250.html');
        }
    }, 100);
});

只有在调整大小事件完成(或暂停 100 毫秒)后才会运行，这意味着您不会在此过程中创建大量 AJAX 请求。您还可以设置一个标志，这样您就不会一次运行多个请求，该标志可以在 .load() 方法的回调函数中解析。