1.iframe引入
创建网页分析广告（myad.html）：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.ads{
position:absolute;
left:0;
bottom:0;
background-color:rgba(0,0,0,0.3);
color:#fff;
font-size:12px;
line-height: 18px;
z-index: 1000;
}
</style>
</head>
<body style="margin:0">
<script type="text/javascript" src="http://dup.baidustatic.com/js/ds.js"></script>
<script type="text/javascript">
<!-- 读取url中的参数“id”并绘制广告 -->
(function() {
var match = location.href.match(/(\?|&)id=([^&]+)(&|$)/);
if (match) {
var slotId = parseInt(match[2], 10);
if (slotId) {
// alert(slotId);
// alert(match[2]);
BAIDU_CLB_fillSlot(match[2]);
let span=document.createElement("span");
span.setAttribute("class","ads");
let textNode=document.createTextNode("广告");
span.appendChild(textNode);
document.getElementsByTagName('body')[0].appendChild(span);
//$('body').append('<span style="position:absolute; left:0;bottom:0; background-color:rgba(0,0,0,0.3); color:#fff; font-size:12px; line-height: 18px;">广告</span>');
// console.log(document.getElementsByTagName("div")[0]);
}
}
})();
</script>
</body>
</html>
其他页面引入：
<iframe src="myad.html?id=9999" width="180" height="150" scrolling="no" frameborder="0" style="display:block;margin:0"></iframe>
src路径写对，id为百度ssp提供的广告id.
此方法无法在引入的页面识别是否为空，容错率过低。
2.两段式广告异步加载：
在页面写好广告位：
可以循环引入，我当时为Nunjucks框架：{{item.id}}为广告id
{% for item in ad %}
<div class='ad' id="job_ad_{{item.id}}"></div>
{% endfor %}
页面后面引入广告js：
<script type="text/javascript" src="http://dup.baidustatic.com/js/ds.js"></script>
js代码里识别并加载：
BAIDU_CLB_fillSlotAsync('{{item.id}}', 'job_ad_{{item.id}}');
BAIDU_CLB_fillSlotAsync(广告id，广告位id名)；
下面为添加的广告和举报提示，延时保证广告加载完后再添加提示字样。
setTimeout(() => {
{% for item in ad %}
BAIDU_CLB_fillSlotAsync('{{item.id}}', 'job_ad_{{item.id}}');
setTimeout(() => {
if($('div[id="job_ad_{{item.id}}"]').html().length !== 0){
$('div[id="job_ad_{{item.id}}"]').append("<div class='height'></div><span style='position:absolute; left:0;bottom:0; background-color:rgba(0,0,0,0.3); color:#fff; font-size:12px; line-height: 18px;'>广告</span><a class='report-ad' href='http://report.0550.com/report' target='_blank' style='display:none; position:absolute;height:auto;text-decoration:none; left:40px;bottom:0; background-color:rgba(0,0,0,0.3); color:#eee; font-size:12px; line-height: 18px;'>举报</a>")
}
},5000);
{% endfor %}
},2000);
$('div[class="ad').hover(function(){
$(this).children('.report-ad').show();
},function(){
$(this).children('.report-ad').hide();
})
网友评论