September,28th,2009
Post Time：Mon, 28 Sep 2009 14:14:43 +0800
By Author：heiniu
背投广告特点：
对于背投广告的原理来说并没有什么难度，无非打开的窗口失去焦点（blur），而原来页面得到焦点（focus）。但对于流行的浏览器来说，如果非用户行为的弹出窗口（即onload时，直接window.open），会被浏览器默认拦截。
背投广告，既然被称为广告，那如何才能让广告主的钱花得实在，花得乐意呢？
我们可以增加判断，如果该弹出窗口被浏览器拦截，则只要用户点击页面(onclick)就触发window.open事件，这样一般不会拦截，浏览器会认为这是用户的默认行为。
同时，如果广告总是不断弹出，我想这是对用户的一种折磨，因此设计可调节的弹出频率，比如利用cookie控制一天只可以弹出一次就比较好。
阿里妈妈背投广告代码：
<script type="text/javascript">
//全局变量
var val_pop_w = 950;//广告页面的宽度
var val_pop_h = 90;//广告页面的高度
var val_pop_id = "mm_13250138_1917484_7967317";//广告id
var val_pop_t = 0;//广告距顶top距离
var val_pop_l = 0;//广告距左边left距离
var val_pop_day = 1;//广告频率天
var val_pop_num = 2;//广告频率次数
//添加监听事件
function addListener(element, e, fn){
element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn)
}
//删除监听事件
function removeListener(element, e, fn){
element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)
}
function openWindowBack(){
var adPopup = window.open('', '背投广告', 'width=' + (parseInt(val_pop_w) + 1) + ',height=' + (parseInt(val_pop_h) + 1) + ', left=' + val_pop_l + ',top=' + val_pop_t);
//设置广告页面内容
var adhtml = "";
var adjs = "";
adjs += '<script type="text/javascript">';
adjs += 'alimama_pid="' + val_pop_id + '";';
adjs += 'alimama_titlecolor="0000FF";';
adjs += 'alimama_descolor ="000000";';
adjs += 'alimama_bgcolor="FFFFFF";';
adjs += 'alimama_bordercolor="E6E6E6";';
adjs += 'alimama_linkcolor="008000";';
adjs += 'alimama_bottomcolor="FFFFFF";';
adjs += 'alimama_anglesize="0";';
adjs += 'alimama_bgpic="0";';
adjs += 'alimama_icon="0";';
adjs += 'alimama_sizecode="15";';
adjs += 'alimama_width=' + val_pop_w + ';';
adjs += 'alimama_height=' + val_pop_h + ';';
adjs += 'alimama_type=2;';
adjs += '<\/script><script src="http://a.alimama.cn/inf.js" type=text/javascript><\/script>';
adhtml += '<html><body style="margin:0;padding:0px;text-align:left;">' + adjs;
adhtml += '</body></html>';
adPopup.document.write(adhtml);
}
var pop_back_ad = function(){
openWindowBack();
window.removeListener(document, 'click', arguments.callee);
}
function SetCookie(name, value, day)//三个参数，一个是cookie的名字，一个是值，一个保存天数
{
var Days = day; //此 cookie 将被保存 1 天
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)//取cookies函数
{
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null)
return unescape(arr[2]);
return null;
}
function delCookie(name)//删除cookie
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
function chkpopad(n, d){
var i = 1;
if (getCookie('popnum') == null){
pop_back_ad();
SetCookie("popnum", i, d);
}
else if (getCookie('popnum')<n){
pop_back_ad();
SetCookie("popnum", parseInt(getCookie('popnum')) + 1, d);
}
}
try{
chkpopad(val_pop_num,val_pop_day);//设置背投广告的次数和保存cookie的天数
}catch(e){
window.addListener(document, 'click', function(){
chkpopad(val_pop_num, val_pop_day);
});
}
//delCookie("popnum");//删除cookie
</script>
在写的过程中遇到一个问题，就是IE和FireFox对document和window的解析不一样，刚开始我一头雾水，就请教克良同学，他老人家也是头一回遇到，google了很久，终于
在一个外国论坛上找到解决方案，但具体的原因还是不清楚。
//兼容IE和FireFox的监听事件的写法
//添加监听事件
function addListener(element, e, fn){
element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn)
}
//删除监听事件
function removeListener(element, e, fn){
element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)
}
//删除监听事件：
window.removeListener(window, 'click', arguments.callee);//这种写法只有IE支持
window.removeListener(document, 'click', arguments.callee);//这种写法兼容IE和FireFox
//添加监听事件：
window.addListener(document, 'click', fn);
背投广告相关问题：
当然如果用户浏览器安装了拦截插件，那很有可能不会弹出（比如Firefox的noscript插件，就不允许任何弹出窗）。方法不是绝对的，也不是最好的，只是用最少的时间来做最效率的事情。
可以通过模拟form提交的方式来弹出窗口，穿越性（相对于一般拦截弹窗的插件）很好，不过无法设置sFeatures参数内容。
demo页面：
http://img.alimama.cn/cms/images/1256207772626.html
