木子屋 Dnawo's BLOG

DOCTYPE元素导致页面脚本运行不正常

👤 dnawo 📅 2007-05-11 👁 7689 👍 0 💬 0 🔄 本站原创
今天DOCTYPE着实把我愚弄了一番:早上有个客户站点首页要添加浮动广告,于是便把手中测试好的JS放了上去,奇怪的浮动广告怎么都不出来,而在测试页中却正常,在测试页中使用排除法将一个个元素去掉后,最终才发现是DOCTYPE在作怪;下午客户又要求用他们先前的浮动广告,幸好早上只是注释了他们的脚本,很快就还原了,奇怪的是脚本也不起作用了,后来想起来试着加上DOCTYPE,却正常了!

A.早上的JS:
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浮动广告</title>
</head>

<body>
<script language="JavaScript" type="text/javascript" src="pic/20070511/float_1.js"></script>
</body>
</html>


B.下午的JS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浮动广告</title>
</head>

<body>
<!-- Float AD Begin by Ethan -->
<script language="javascript">
var showad = true;
var Bottompx = 10;			//上端位置
var AdDivW = 282;		//宽度(图片)
var AdDivH = 402;		//高度(图片)
var PageWidth = 800;	//页面多少宽度象素下正好不出现左右滚动条
var MinScreenW = 1024;	//显示广告的最小屏幕宽度象素

var ClosebuttonHtml = "<div align=\"right\" style=\"color:#FFF;position:absolute;top:0px;height:14px;left:0px;margin:0px;width:100%;padding:0;z-index:2000;\"><a href=\"javascript:void(0);\" onclick=\"hidead()\" style=\"background:#FFF;color:#F30;text-decoration:none;font-size:12px;padding:3px;\">关闭</a></div>";
var AdContentHtml = "<div align=\"center\" style=\"padding-top:1px\"><a href=\"http://www.mzwu.com\"><img border=\"0\" src=\"pic/20070509/Logo_25wht.gif\" alt=\"\" /></a></div>";
document.write ("<div id=\"Javascript.RightDiv\" style=\"position: absolute;border: 1px solid #336699;background-color:#EEEEE2;z-index:1000;width:"+AdDivW+"px;height:"+AdDivH+"px;top:-1000px;word-break:break-all;display:none;\">"+ClosebuttonHtml+"<div>"+AdContentHtml+"</div></div>");
function scall(){
	if(!showad){return;}
	if (window.screen.width<MinScreenW){
		alert("临时提示:\n\n显示器分辨率宽度小于"+MinScreenW+",不显示广告");
		showad = false;
		document.getElementById("Javascript.RightDiv").style.display="none";
		return;
	}
	var Borderpx = ((window.screen.width-PageWidth)/2-AdDivW)/2;

	document.getElementById("Javascript.RightDiv").style.display="";
	document.getElementById("Javascript.RightDiv").style.top=document.documentElement.scrollTop+document.documentElement.clientHeight-AdDivH-Bottompx;
	document.getElementById("Javascript.RightDiv").style.right="10px";
}

function hidead()
{
	showad = false;
	document.getElementById("Javascript.RightDiv").style.display="none";
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
</script>
<!-- Float AD End -->
</body>
</html>


上网搜索相关资料后发现Dreamweaver每次生成的第一句代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
它指定了 HTML 文档遵循的文档类型定义(DTD),如果后面JS事件的一些定义没有遵循这个DTD,那么这个事件既不触发,也不报错。

评论(0)

暂无评论。

计算题
评论需审核通过后显示
← 上一篇 令网站提速的7大秘方网站 下一篇 → 2007张学友好久不见世界巡回演唱会福州站