zhichen-edu
/
zc_saas_h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="misapplication-tap-highlight" content="no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>
    <title>Hello H5+</title>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript">
var adDom = null;
// DOMContentloaded事件处理
document.addEventListener('DOMContentLoaded', function(){
  //获取占位div元素 
  adDom = document.getElementById('ad');
}, false);

var adView = null;
//创建并渲染广告
function doCreateAd(){
  //创建AdView控件
  adView = plus.ad.createAdView({
    top:adDom.offsetTop+'px',
    left:'0px',
    width:'100%',
    height:'0px',
    position: 'static'
  });
  //将AdView添加到Webview窗口中
  plus.webview.currentWebview().append(adView);
  //监听AdView渲染完成事件，动态调整高度
  adView.setRenderingListener(function(e){
    outLine('渲染广告完成: '+JSON.stringify(e));
    if(0 != e.result){
      outLine('渲染失败！');
    }else{
      //调整广告控件高度，显示广告内容
      adView.setStyle({height:e.height+'px'});
      //调整占位div高度，避免被广告控件盖住DOM元素
      adDom.style.height = e.height+'px';
    }
  });
  //监听用户关闭广告控件事件
  adView.setDislikeListener(function(e){
    console.log('用户关闭广告: '+JSON.stringify(e));
    adView.close(),adView=null;
    //调整占位div高度，避免关闭广告控件后显示空白区域
    adDom.style.height = '0px';
  });
  //获取广告数据
  plus.ad.getAds({adpid:'1111111111',width:'100%',count:1}, function(e){
    outLine('获取广告成功: '+JSON.stringify(e));
    if(!e || !e.ads || e.ads.length<1){
      outLine('无广告数据！');
    }else{
      outLine('开始渲染广告');
      //绑定并渲染广告数据
      adView.renderingBind(e.ads[0]);
    }
  }, function(e){
    outLine('获取广告失败: '+JSON.stringify(e));
  });
}


// 显示广告
function showAd(){
  if(adView){
    outSet('广告已经显示！');
    return;
  }
  outSet('#显示广告#');
  doCreateAd();
}
//更新广告
function updateAd(){
  outSet('#更新广告#');
  adView&&(adView.close(),adView=null);
  adDom&&(adDom.style.height='0px');
  doCreateAd();
}

//视频激励广告
var adReward = null;
function rewardedVideoAd(){
  if(adReward){
    outLine('正在加载激励视频广告');
    return;
  }
  outSet('#视频激励广告#');
  adReward = plus.ad.createRewardedVideoAd({adpid:'1507000689'});
  adReward.onLoad(function(){
    outLine('加载成功')
    adReward.show();
  });
  adReward.onError(function(e){
    outLine('加载失败: '+JSON.stringify(e));
    adReward.destroy();
    adReward = null;
  });
  adReward.onClose(function(e){
    if(e.isEnded){
      outLine('激励视频播放完成');
      plus.nativeUI.toast('激励视频播放完成');
    }else{
      outLine('激励视频未播放完成关闭!')
    }
    adReward.destroy();
    adReward = null;
  });
  adReward.load();
}
    </script>
    <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  </head>
  <body>
    <br/>
    <div class="button" onclick="showAd()">显示信息流广告</div>
    <div class="button" onclick="updateAd()">更新信息流广告</div>
    <div class="button" onclick="rewardedVideoAd()">视频激励广告</div>
    <br/>
    <div style="background-color:#00AA00;width:100%;height:100px;">
      <br/>
      <p style="color:#FFFFFF" class="des">信息流广告是原生控件渲染，层级高于所有DOM元素，使用时需要注意层级问题。</p>
    </div>
    <div id="ad" style="width:100%;height:0px;"></div>
    <div style="background-color:#0000AA;width:100%;height:500px;">
      <br/>
      <p style="color:#FFFFFF" class="des">这是显示在信息流广告项后面的内容，广告加载显示后自动调整位置避免被广告控件覆盖。</p>
    </div>
    <div id="outpos"/>
    <div id="output"/>
  </body>
</html>