Javascript 我们如何防止OpenX阻止页面加载？

我们使用OpenX在许多网站上发布广告。但是，如果OpenX服务器出现问题，它会阻止这些站点上的页面加载。我宁愿让网站优雅地失败，也就是说，加载没有广告的页面，并在可用时填充

---

我们使用的是OpenX，我们在CSS中为div指定了明确的大小，这样就可以在没有内容的情况下对它们进行布局，但加载脚本仍然会阻止页面加载。使用OpenX加速页面还有其他最佳实践吗？

我们在iFrame中加载广告，以避免您遇到的问题。我们调整div和iframe的大小相同，iframe指向一个只包含广告片段的页面（您可以将区域和其他必需的选项作为参数传递给该页面）

干杯

---

Lee

我们延迟加载OpenX的代码。我们没有将单页调用放在页面的顶部，而是将其放在底部。加载页面后，调用将获取横幅数据，自定义代码将在正确的区域中添加正确的横幅

下面的代码需要一个合适的DOM。如果您有jQuery、DOMAssistant、FlowJS等，那么应该为您修复DOM。 此代码将与图像、flash或HTML内容的普通横幅一起使用。它在某些情况下可能不起作用，例如使用外部提供商（adform等）的横幅时。为此，您可能需要对代码进行一些修改

如何使用它

在HTML代码末尾添加SinglePageCall代码

将此代码添加到SPC代码下

大约半秒钟后，您的OpenX代码应该准备好了，下面的代码将把横幅放在指定的div中

哦，是的，你需要在你的HTML代码中添加一些div作为横幅的占位符。默认情况下，我将这些横幅设置为CSS类“hidden”，它完全隐藏div（具有可见性、显示和高度）。然后，在成功加载给定DIV中的横幅之后，我们移除隐藏的类，DIV（以及其中的横幅）变得可见

使用风险自负！：）希望有帮助

(function(){
if (!document || !document.getElementById || !document.addEventListener || !document.removeClass) {
return; // No proper DOM; give up.
}
var openx_timeout = 1, // limit the time we wait for openx
oZones = new Object(), // list of [div_id] => zoneID
displayBannerAds; // function.


// oZones.<divID> = <zoneID>
// eg: oZones.banner_below_job2 = 100;
// (generated on the server side with PHP)
oZones.banner_top = 23;
oZones.banner_bottom = 34;



displayBannerAds = function(){
if( typeof(OA_output)!='undefined' && OA_output.constructor == Array ){
  // OpenX SinglePageCall ready!

  if (OA_output.length>0) {

    for (var zone_div_id in oZones){
      zoneid = oZones[zone_div_id];

      if(typeof(OA_output[zoneid])!='undefined' && OA_output[zoneid]!='') {

        var flashCode,
          oDIV = document.getElementById( zone_div_id );

        if (oDIV) {

          // if it's a flash banner..
          if(OA_output[zoneid].indexOf("ox_swf.write")!=-1)
          {

            // extract javascript code
            var pre_code_wrap = "<script type='text/javascript'><!--// <![CDATA[",
              post_code_wrap = "// ]]> -->";

            flashCode = OA_output[zoneid].substr(OA_output[zoneid].indexOf(pre_code_wrap)+pre_code_wrap.length);
            flashCode = flashCode.substr(0, flashCode.indexOf(post_code_wrap));


            // replace destination for the SWFObject
            flashCode = flashCode.replace(/ox\_swf\.write\(\'(.*)'\)/, "ox_swf.write('"+ oDIV.id +"')");


            // insert SWFObject
            if( flashCode.indexOf("ox_swf.write")!=-1 ){
              eval(flashCode);
              oDIV.removeClass('hidden');
            }// else: the code was not as expected; don't show it


          }else{
            // normal image banner; just set the contents of the DIV
            oDIV.innerHTML = OA_output[zoneid];
            oDIV.removeClass('hidden');
          }
        }
      }
    } // end of loop
  }//else: no banners on this page
}else{
  // not ready, let's wait a bit
  if (openx_timeout>80) {
    return; // we waited too long; abort
  };
  setTimeout( displayBannerAds, 10*openx_timeout );
   openx_timeout+=4;
}
};
displayBannerAds();
})();

（函数（）{
如果（！document | |！document.getElementById | |！document.addEventListener | |！document.removeClass）{
return；//没有合适的DOM；放弃。
}
var openx_timeout=1，//限制我们等待openx的时间
oZones=new Object（），//列表[div_id]=>zoneID
displayBannerAds；//函数。
//臭氧层
//例如：oZones.banner_低于_job2=100；
//（使用PHP在服务器端生成）
oZones.banner_top=23；
oZones.banner_bottom=34；
displayBannerAds=函数（）{
if（typeof（OA_输出）！='undefined'&OA_output.constructor==数组）{
//OpenX SinglePageCall准备好了！
如果（OA_输出长度>0）{
用于（臭氧层中的可变区分区id）{
分区id=臭氧层[分区id]；
if（类型（OA_输出[zoneid]）！='undefined'&&OA_输出[zoneid]！=''）{
var闪码，
oDIV=document.getElementById（区域分区id）；
如果（oDIV）{
//如果它是一个闪光的横幅。。
if（OA_输出[zoneid].indexOf（“ox_swf.write”）！=-1）
{
//提取javascript代码
var pre_code_wrap=“”；
flashCode=OA_输出[zoneid].substr（OA_输出[zoneid].indexOf（前代码包裹）+前代码包裹.length）；
flashCode=flashCode.substr（0，flashCode.indexOf（post_code_wrap））；
//替换SWFObject的目标
flashCode=flashCode.replace（/ox\'u-swf\.write\（\'（.*）/，“ox\'u-swf.write（'“+oDIV.id+”）”）；
//插入SWFObject
if（flashCode.indexOf（“ox_swf.write”）！=-1）{
eval（flashCode）；
oDIV.removeClass（“隐藏”）；
}//else:代码不是预期的；不要显示它
}否则{
//普通图像横幅；只需设置DIV的内容
oDIV.innerHTML=OA_输出[zoneid]；
oDIV.removeClass（“隐藏”）；
}
}
}
}//循环结束
}//其他：此页上没有横幅
}否则{
//还没准备好，我们等一会儿吧
如果（openx_超时>80）{
return；//我们等待的时间太长；中止
};
设置超时（显示横幅，10*openx_超时）；
openx_超时+=4；
}
};
显示横幅（）；
})();

在@Rafa极好的回答之后，我将使用此代码在页面加载后调用OpenX横幅。我也在使用jquery，必须为flash横幅使用的“document.write”添加一个新的替换调用，并将其替换为“$（'#“+oDIV.id+”）。而不是“append”。我正在使用一个自定义的“my_openx（）”调用来替换“OA_show（）”。我的横幅区域由zone_id命名，并包裹在一个div中，如下所示：

<div id="openx-4"><script>wm_openx(4);</script></div>

$(document).ready(function(){
   $(window).scroll(lazyload);
   lazyload();
});

function lazyload(){
   var wt = $(window).scrollTop();    //* top of the window
   var wb = wt + $(window).height();  //* bottom of the window

   $(".ads").each(function(){
      var ot = $(this).offset().top;  //* top of object (i.e. advertising div)
      var ob = ot + $(this).height(); //* bottom of object

      if(!$(this).attr("loaded") && wt<=ob && wb >= ot){
         $(this).html("here goes the iframe definition");
         $(this).attr("loaded",true);
      }
   });
}

wm_openx（4）；

它正在工作：）

$is_mobile=false；
$document_ready=0；
$（文档）.ready（函数（）{
$document_ready=1；
if（$（'#MobileCheck'）.css（'display'）=='inline'）{
$is_mobile=true；
//警报（'is_mobile:'+$is_mobile）；
}
});
函数wm_openx（$id）{
如果（$is_mobile）返回false；
如果（！$document\u就绪）{
setTimeout（函数（）{wm_openx（$id）；}，1000）；
返回false；
}
if（类型（OA_输出[$id]）！='undefined'&&OA_输出[$id]！=''）{
var闪码，
oDIV=document.getElementById（'openx-'+$id）；
如果（oDIV）{
//如果它是一个闪光的横幅。。
if（OA_输出[$id].indexOf（“ox_swf.write”）！=-1）{
//提取javascript代码
var pre_code_wrap=“”；
flashCode=OA_输出[$id]。substr（OA_输出[$id]。indexOf（pre_code_wrap）+pre_code_wrap.length）；
flashCode=flashCode.substr（0，flashCode.indexOf（post_code_wrap））；
//替换SWFObject的目标
flashCode=flashCode.replace（/ox\'u-swf\.write\（\'（.*）/，“ox\'u-swf.write（'“+oDIV.id+”）”）；
flashCode=flashCode.replace（/document.write/，“$”（“#“+oDIV.id+”）.append”）；
//插入SWFObject
if（flashCode.indexOf（“o
function lazyload(){
   var wt = $(window).scrollTop();    //* top of the window
   var wb = wt + $(window).height();  //* bottom of the window

   $(".ads").each(function(){
      var ot = $(this).offset().top;  //* top of object (i.e. advertising div)
      var ob = ot + $(this).height(); //* bottom of object

      if(!$(this).attr("loaded") && wt<=ob && wb >= ot){
         $(this).html("here goes the iframe definition");
         $(this).attr("loaded",true);
      }
   });
}

<html>
<head></head>

<body>

Some content here.

Ad goes here.

<!-- Preserve space while the rest of the page loads. -->

<div id="placeholderId" style="width:728px;height:90px">

<!-- Fallback mechanism to use if unable to load the script tag. -->

<noscript>
<iframe id="4cb4e94bd5bb6" name="4cb4e94bd5bb6"
 src="http://d.example.com/w/1.0/afr?auid=8&target=
_blank&cb=INSERT_RANDOM_NUMBER_HERE"
 frameborder="0" scrolling="no" width="728"
 height="90">
<a href="http://d.example.com/w/1.0/rc?cs=
4cb4e94bd5bb6&cb=INSERT_RANDOM_NUMBER_HERE"
 target="_blank">
<img src="http://d.example.com/w/1.0/ai?auid=8&cs=
4cb4e94bd5bb6&cb=INSERT_RANDOM_NUMBER_HERE"
 border="0" alt=""></a></iframe>
</noscript>
</div>

<!--Async ad request with multiple parameters.-->

<script type="text/javascript">
    var OX_ads = OX_ads || [];
    OX_ads.push({
       "slot_id":"placeholderId",
       "auid":"8",
       "tid":"4",
       "tg":"_blank",
       "r":"http://redirect.clicks.to.here/landing.html",
       "rd":"120",
       "rm":"2",
       "imp_beacon":"HTML for client-side impression beacon",
       "fallback":"HTML for client-side fallback"
    });
</script>

<!-- Fetch the Tag Library -->

<script type="text/javascript" src="http://d.example.com/w/1.0/jstag"></script>

Some other content here.

</body>
</html>