8/06/2008

在XHTML1.1 Strict Doctype下xhtml+xml伺服的页面中投放阿里妈妈广告代码的方法

首先说明本文档仅面向W3C标准发烧友,当前99%的网站不会遇到这个问题,因为本文讨论的网页标准尚未得到广泛支持(IE6似乎不支持),同时也还不明 确当前版本是否将是以后获得普遍支持的最终版。如果您不是带着问题过来,或者对XHTML1.1 Strirt DocType这些名词不甚了解,可以先不看本文。
 
http://validator.w3.org/是校验文档是否符合相应标准的官方网页。
XHTML1.1 Strict Doctype下xhtml+xml伺服的页面中对于网页的要求已经非常的多,并不仅限于标签必须闭合、属性必须小写等传统的XHTML要求。还有例 如<head>元素内必须带有<title>,<body>元素内不能为空等等。
 
这种类型的网页在发布阿里妈妈广告时遇到2个主要问题,一个是JavaScript中document.write()函数失效,另一个是不支持<iframe>元素。
 
本着对广告主负责的态度,避免点击欺诈,任何互联网按效果付费广告提供商都不会让广告走出IFRAME。
 
为什么XHTML不支持document.write();可以参考:
http://ln.hixie.ch/?start=1091626816&order=-1&count=1
 
看来我们只有使用折中的办法解决这个问题,将Alimama广告放在一个不在xhtml+html伺服下此Doctype的单独页面的中。
 
例如 alimama_ad.html 代码如下:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title></title>
</head>
<body style="margin:0px;padding:0px">
 <script type="text/JavaScript">
 alimama_pid="mm_xxx_xxx_xxx";
 alimama_titlecolor="CC6600";
 alimama_descolor ="BEA87C";
 alimama_bgcolor="F0EFE3";
 alimama_bordercolor="AB9F70";
 alimama_linkcolor="779972";
 alimama_bottomcolor="F0EFE3";
 alimama_anglesize="10";
 alimama_bgpic="0";
 alimama_icon="0";
 alimama_sizecode="12";
 alimama_width=468;
 alimama_height=60;
 alimama_type=2;
 </script>
 <script type="text/javascript" src="http://a.alimama.cn/inf.js"></script>
</body>
</html>
 
此处注意一个细节body标签里面的style="margin:0px"必不可少,否则广告将不会紧贴页面左上角而会留出一定空隙。
 
再将这个页面通过object嵌入到XHTML页面中
例如index.xhtml代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
 <title></title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"></meta>
 <meta http-equiv="content-language" content="zh-cn"></meta>
</head>
<body>
 <object data="alimama_ad.html" type="text/html" style="border:0px;width:468px;height:64px;overflow:hidden"><p></p></object>
</body>
</html>
 
上面的代码已经经过W3C的测试没有问题。
需要注意如下细节:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
这段说明当前网页遵循xhtml1.1 strict (严格的) 文档定义标准
 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"></meta>
表明当前文档以application/xhtml+xml伺服,区别常见的html/txt的MIME类型
 
<head>内必须含有<title>元素
 
<object>对象内的<p>元素可以用<h1><div>等等替代但是不能为空
 
<object>对象的样式overflow:hidden防止嵌入页面出现滚动条
 
<object>对象的的高度要大于广告高度至少4px,否则safari浏览器中还是会出现滚动条,比如本测试页面广告尺寸是468x60,我们设置object的高度位64px。
 
<object>data属性指向广告承载页面alimama_ad.html地址,注意需要是和xhtml页面同域名下的地址,最好是相对路径。否则可能会影响广告匹配效果,从而影响收入。
 
满足了以上的细节,才可能在W3C测试通过的情况下正确的显示广告了。FireFox、Safari和Opera下都没有问题。
 
但是还没有完,因为IE下还不行。这就要求我们在Web服务器PHP、ASP或JSP等等服务器脚本端下功夫,将页面index.xhtml改造成动态的。
以php为例,我们需要判断MIME类型(也就是伺服类型)如果是application/xhtml+xml则输出<object>其他情况还是输出mama拿到的广告代码:
 
<?php if($mime == "application/xhtml+xml") {?>
 <object data="alimama_ad.html" type="text/html" style="border:0px;width:468px;height:64px;overflow:hidden"><p></p></object>
<?}else{?>
 
 <script type="text/JavaScript">
 alimama_pid="mm_xxx_xxx_xxx";
 alimama_titlecolor="CC6600";
 alimama_descolor ="BEA87C";
 alimama_bgcolor="F0EFE3";
 alimama_bordercolor="AB9F70";
 alimama_linkcolor="779972";
 alimama_bottomcolor="F0EFE3";
 alimama_anglesize="10";
 alimama_bgpic="0";
 alimama_icon="0";
 alimama_sizecode="12";
 alimama_width=468;
 alimama_height=60;
 alimama_type=2;
 </script>
 <script type="text/javascript" src=""></script>
<?php}?>
 
至此全部开发完成,其中细节较多任何地方出现问题都可能导致不完美的记过,有兴趣的朋友可以一试。

0 评论:

免责声明

1、本人是文盲,以上内容文字均不认识,也看不懂是什么意思(包括但不限于对所以上之内容的识别、阅读、理解、分析、记忆等);

2、本人过去、现在以及将来都不认识本文中提及当事人,且自古以来与该相对人无利益关系;

3、本人昨天、今天以及明天都没有或者不准备去本文所述地点。本文表述之事与本人无关。

4、本人在此发文(包括但不限于汉字、拼音、拉丁字母、斯拉夫字母、日语假名、阿拉伯字母、单词、句子、图片、影像、录音、以及前述之各种任意组合等等)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对文中观点。如需要详查请直接与键盘发明者及生产厂商法人代表联系;

5、人生有风险,上网需谨慎。本文不暗示、鼓励、支持或映射读者作出生活方式、工作态度、婚姻交友、股票债券买卖、子女教育的积极或消极判断。未成年人请在监护人陪同下阅读本文。无完全民事行为能力者,请立即关闭网页,并用20%高锰酸钾+75%乙醇对键盘、硬盘、电压插座、显示器、鼠标、cpu进行灌溉消毒;

6、如本人留言违反国家有关法律,请网络管理员及时删除本文,本人保留继续发文的权利;

7、因删贴不及时所产生的任何法律(包括宪法、加法、减法、乘法、除法、剑法、拳法、脚法、指法、民法、刑法、书法、公检法、基本法、劳动法、婚姻法、输入法、没办法、国际法、今日说法、吸星大法及文中涉及或可能涉及以及未涉及之法,各地治安管理条例)纠纷或责任本人概不负责;

8、本人谢绝任何跨省(包括但不限于跨国、跨洲、跨星球、跨星系)追捕行为。确因不抓不足以平民愤,或不抓就领不到薪水养家户口的公职人员,建议携带工作证、身份证、结婚证/离婚证、独生子女证、健康证、暂住证、毕业证、边防证、县以上政府机关出具的介绍信温情操作。抓捕按照以下排序倒序:作者、原作者以及网络管理员以及网络运行商、电信运营商、电力供应商、电脑生产销售商.