2

目前我正在做响应式网络开发。该网站完全响应，但我们使用 iframe 将广告包含在网站中。有些广告就像启动器广告或伙伴横幅广告。由于 iFrame，这些动态广告无法按预期工作。

例如，

$(window).resize(function() {
  $('.rad').each(function(index) {
    var role = $(this).find("div").attr('role');
    if($(this).hasClass('fullwidth-ad')){   
      if(($(this).width() >= 234)&&($(this).width() < 486)) {   
        if(role != 'mobile_leaderboard_ad'){
          $(this).find("div").attr('role','mobile_leaderboard_ad');
          $(this).find("div").attr('class','fix-bottom');                               
          $(this).find("iframe").attr('src','/sites/all/libraries/rad/rad.php?r=mobile_lb');
        }
      } 
      else if(($(this).width() >= 486)&&($(this).width() < 610)) {                              
        if(role != 'banner_ad'){    
          $(this).find("div").attr('role','banner_ad');
          $(this).find("div").attr('class','banner_ad');
          $(this).find("iframe").attr('src','/sites/all/libraries/rad/rad.php?r=tablet_lb');
        }
      } 
      else if($(this).width() >= 610) {                             
        if(role != 'leaderboard_ad'){   
          $(this).find("div").attr('role','leaderboard_ad');
          $(this).find("div").attr('class','leaderboard_ad');
          $(this).find("iframe").attr('src','/sites/all/libraries/rad/rad.php?r=desktop_lb');
        }
      }
    }               
  });
});

那么在响应式网页设计中包含广告有更好的主意吗？

4

2 回答 2

3

响应式设计的广告肯定会很麻烦。事实上，对于某些广告网络（例如 Google AdSense），由于您无法在页面上重新加载广告，因此您根本无法妥善处理响应式设计！据说IAB 正在研究它。（在我看来，为时已晚 10 年。如果技术的业务方面能够跟上，那肯定会很好。）

我建议您编写媒体查询 CSS 以根据需要显示/隐藏包含广告的 div。然后有一些 JavaScript 代码在页面调整大小时运行。这段代码可以做这样的事情：

  1. 获取与广告位关联的元素
  2. 确定这些元素是否设置为display: none。
  3. 如果这些广告位尚未包含广告，请在这些广告位中设置新广告

您还需要对页面重新大小进行速率限制。使用 500 毫秒左右的超时，以便在每次调整页面大小时重置。这样一来，拖动浏览器边框的人就不会重新加载您的广告 x1000。

于 2013-03-11T03:43:37.963 回答
0

你想要无缝的 iframe。disqus 使用了这种技术，而且非常漂亮。这是关于它的演示http://benvinegar.github.com/seamless-talk/#/但您将要密切关注幻灯片 33 http://benvinegar.github.com/seamless-talk/#/ 33

于 2013-03-11T04:13:16.793 回答