forked from dcloudio/mui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ad.html
107 lines (92 loc) · 3.88 KB
/
ad.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="../js/mui.min.js"></script>
<link href="../css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">advertisement(广告模板)</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>本页为广告模板示例,集成了百度联盟的网站广告,目前支持广告固定在底部显示。</p>
<p>集成教程参考:<a href="http://ask.dcloud.net.cn/article/712">文档中心</a></p>
</div>
</div>
</body>
<script type="text/javascript">
mui.plusReady(function () {
if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE){
mui.toast("当前网络不给力,无法加载广告");
}else{
//百度广告集成教程参考:http://ask.dcloud.net.cn/article/712
//屏幕真实宽度
var width = window.innerWidth;
var height = window.innerHeight;
/*---需要开发者修改的内容---begin*/
//百度联盟申请的广告位id
var cpro_id = "u2206321";
//广告投放域名地址
var ltu = encodeURIComponent('http://www.dcloud.io/ad/');
//投放广告的服务端页面标题
var title = encodeURIComponent('DCloud HBuilder-做最好的HTML5开发工具||MUI-最接近原生体验的高性能前端框架');
//根据投放广告的比例,计算广告高度,Hello MUI选择的广告位是20:3尺寸
var adHeight = parseInt(width)*3/20;
/*---需要开发者修改的内容---end*/
//百度广告地址
var p = ["acom","icxm","tcmm","icfm","mcum"];
var t = new Date().getTime();
var url = "http://pos.baidu.com/"+p[parseInt(5*Math.random())]+"?dc=2&dri=0&dis=0&dai=1&ps=0x0&dcb=BAIDU_SSP_define&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr="+t+"&ari=1&dbv=2&drs=1&cfv=0&cpl=0&chi=4&cce=true&cec=UTF-8&tlm=1437985083&ecd=1&pis=-1x-1&ccd=24&cja=false&cmi=0&col=en-US&cdo=0&tcn=1467173621&qn=d5d5b72998fc778b&tt=1467173620584.25.60.68";
url += "&sz="+width+"x"+adHeight;
url +="&rdid="+cpro_id.substring(1);
url +="&di="+cpro_id;
url +="&ti="+title;
url +="<u="+ltu;
url +="&psr="+window.screen.availWidth+"x"+window.screen.availHeight+"&par="+window.screen.availWidth+"x"+window.screen.availHeight;
url +="&pcs="+window.outerWidth+"x"+window.outerHeight+"&pss="+window.outerWidth+"x0";
url +="&rw="+Math.max(320, Math.min(window.innerWidth, window.innerHeight));
var adBottom = mui.os.ios?('-'+adHeight+'px'):'0';
var ad = plus.webview.create(url,'ad',{height:adHeight+'px',bottom:adBottom,position:"absolute"});
ad.appendJsFile('_www/js/ad.js');
//目前Android平台不支持子webview的setStyle动画,因此分平台处理;
if(mui.os.ios){
//为了支持iOS平台左侧边缘滑动关闭页面,需要append进去;
plus.webview.currentWebview().append(ad);
ad.addEventListener('loaded',function () {
ad.setStyle({
bottom:'0',
transition: {
duration: 150
}
});
});
}else{
ad.addEventListener('loaded',function () {
ad.show('slide-in-bottom');
});
}
//设置主页面的底部留白,否则会被遮住;
document.querySelector('.mui-content').style.paddingBottom = adHeight + 'px';
}
});
//处理点击事件,需要打开原生浏览器
mui('body').on('tap', 'a', function(e) {
var href = this.getAttribute('href');
if (href) {
if (window.plus) {
plus.runtime.openURL(href);
} else {
location.href = href;
}
}
});
</script>
</html>