Question

目前我正在进行响应式Web开发。该网站完全响应，但我们使用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');
        }
      }
    }               
  });
});

那么在响应式网页设计中包含广告会更好吗？

Answer 1

对于响应式设计的广告肯定会是一个真正的麻烦。事实上，对于某些广告网络（例如Google AdSense），由于您无法在网页上重新加载广告，因此根本无法妥善处理响应式设计！ IAB is supposedly working on it。{{3}}。（在我看来，已经晚了10年。如果技术的业务方面能跟上，那肯定会很好。）

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

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

您还需要对页面重新设置大小进行速率限制。使用大约500ms的超时，每次调整页面大小都会重置。这样，有人拖动浏览器边框就不会重新加载您的广告x1000。

Answer 2

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

响应式网页设计中的iFrame问题

2 个答案: