在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}?>
至此全部开发完成，其中细节较多任何地方出现问题都可能导致不完美的记过，有兴趣的朋友可以一试。
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}?>
至此全部开发完成，其中细节较多任何地方出现问题都可能导致不完美的记过，有兴趣的朋友可以一试。
新闻消息 @ 19:34
0 条评论:
发表评论
订阅 博文评论 [Atom]
<< 主页