模态框title丢失的调查
KeyWord：模特框标题丢失,模态框title丢失,title丢失,模态框用主题,模态框用皮肤,模态框用主题title丢失,模态框用主题标题丢失,模态框用skin标题丢失,模态框用皮肤标题丢失,模态框tile,模态框标题,theme和StyleSheetTheme的区别,Theme和StyleSheetTheme有什么不同,httpwatch下载,httpwatch使用,httpwatch教程,httpwatch帮助
1：问题现象
弹出的模态框，回传以后页面的Title丢失了。
两个页面father.html 里面有个按钮，按一下，弹出Child.html模态框，代码如下：
<!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>
<title>i'm father</title>
</head>
<body>
<input type="button" value="popIt" onclick="window.showModalDialog('Child.html')");">
</body>
</html>
Child.html页面,里面有个按钮,让页面自己提交自己,代码如下:
<!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>
<base target="_self" />
<meta http-equiv="Expires" content="0" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Pragma" content="no-cache" >
<script language="javascript">
</script>
<title>I'm Poped!</title>
</head>
<body>
<form name="form1" method="post" action="Child.html">
<input type="submit" name="Button1" value="Button" id="Button1" />
</form>
</body>
</html>
2:bug再现:
单单打开child.html页面点击按钮,tilte正常,并不会丢失.
从father.html弹出child.html,这时候tilte也是正常的.点击child页面里面的按钮,这时候发现title丢失了.
3:分析
从页面上看,各个页面都是没有问题的,但是问题出现在什么地方呢?其实问题就出在title语句出现的位置.不知道这个算不算IE的bug,当<head>和<title>之间出现其他语句元素的时候,就会造成title回传丢失的现象.把child.html页面的<title>I'm Poped!</title>这句话,放在紧跟着<head>之后,发现问题就解决了.
4:还有一些问题.
到这里好像问题都已经解决了,可是当你的网站用到StyleSheetTheme来布置主题的时候的时候,就会发现问题又来了.弹出窗口title依然会丢失.这时候你会发现问题大了,因为模态框是不运行用鼠标右键和查看源代码的,也许你和一开始的我一样,心想用JavaScript代码把源码打出来看不就行了吗?可惜document.documentElement.innerHTML并不想我们想想中的那么有效,它总是把老的源码或者稍微有些修改后的源码呈现给我们.这时候我们可以用一个小软件来帮我们完成这个任务,它就是httpwatch,其实这个是一个监视http数据的一个小工具,但是利用它,我们也可以查看到网站的源代码.安装它以后,ie会多一个图标,点下图标会出现它的操作页面.如图:
这个软件可以到我的blog上去下载(http://justinyoung.cnblogs.com)
当你点击Record按钮的时候,它就开始监视所有的http动作,并能跟踪到关联的文件.通过content tag我们可以看到关联文件的源代码.
让我们来看看为什么title会丢失吧.只要看看这段代码就知道该死的StyleSheetTheme给我们的网页做了什么.
<head><link href="../App_Themes/SRBTheme/GridView.css" type="text/css" rel="stylesheet" /><link href="../App_Themes/SRBTheme/MasterPage.css" type="text/css" rel="stylesheet" /><title>
I'm Poped!
</title>
没错,它在<head>和<title>之间加入了引用样式表的代码,正是这个介入<head>和<title>之间的代码导致我们的模特框丢失了title.
问题来了,我们到底要怎么处理这个问题呀.其实当你看到这篇文章的KeyWord的时候就应该知道了.不要用StyleSheetTheme属性来布置主题,而是用Theme来布置主题.这样它就会讲引入样式表的文件加到</head>之前.问题也就随之消失了.
顺便谈谈我感觉的StyleSheetTheme和Theme的区别吧.
最明显的区别是StyleSheetTheme可以在设计模式的时候就能体现出来,而Theme是不能的.
StyleSheetTheme和Theme的第二个区别是,对css样式表的覆盖上.StyleSheetTheme会强行覆盖css样式表,Theme则是优先css样式表.
最后一点就是这篇文章讲到的啦.对css样式表引入代码的插入位置.
在发现这点之前,我们还想过一个方法.就是将body之间的东西用updatapanel包起来,这样对head之间就不会有影响(因为title第一次显示是正常的,只有在回传之后才会消失).具体行不行,你们自己试验一下吧.
