怎样在Web开发中完美控制IE标题栏 - birdshome - 博客园
随笔 - 333, 文章 - 871, 评论 - 5760, 引用 - 356
&&&&IE以及任何目前浏览器的标题栏，原本都应该是由&title&这个HTML标签来控制的，当然现在仍然也是。只是目前的鬼趋势是，你最好不要再刷新你的网页页面了，然后还需要接受用户的任意蹂躏。这也就是传说中神龙见首不见尾，杀人于无影无形的悖时Ajax技术！&&&&在浏览器的标题栏中显示贴切的页面标题，是一个网页专业的表现，同时也能对搜索引擎友好。当然如果放上适当的提示信息，也会很有意义。那么怎么"动态"的来定制这个标题内容呢？&&&&我们知道使用ASP动态修改浏览器title，大概是这样的语句：
&&&&&title&&%&=&GenerateTitle&%&&/title&
&&&&而在ASP.NET 1.1中，除了仍可以使用上面的方法外，我们多了一个看起来"很美"的方法：
&&&&In&aspx&page:&&&&&&&&&&title&id="cltTitle"&runat="server"&&/title&&&&&In&CS&file:&&&&&&&&&protected&HtmlGeneralControl&cltT&&&&&&&&. . .&&&&&&&&cltTitle.innerHtml&=&"birdshome's&homepage";
&&& 今天到了ASP.NET 2.0时代，除了上面的两种方法，我们还可以更容易的修改&title&内容：&
&&&Page.Title&=&"birdshome's&homepage";
&&&&不过上面的"动态"都是在服务器端修改&title&的内容，实际上对于浏览器来说&title&标签内的内容是完全固定的了。下面言归正传，仔细来说说在客户端对IE浏览器标题栏的控制：&&& 对于IE窗口中的页面，在页面DOM对象中，document.title属性是用来代替&title&元素的innerHTML获取和设置IE窗口标题栏内容的。请看下面这个示例：
&html&&body&&&&&&!--&page&content&--&&&&&&script&language="javascript"&&&&&&&&&document.body.onload&=&function()&&&&{&&&&&&&&document.title&=&"birdshome's&homepage"；&&&&};&&&&&/script&&/body&&/html&
&&& 对，就是这么简单就可以设置好普通IE窗口的标题栏。那么这有什么好说的呢？这时候如果我们把完全相同的代码放入模态窗口中执行呢？模态窗口的标题栏是否会被修改？试验结果却是让人沮丧的，完全相同的这段代码，在模态窗口中就失灵了。难道模态窗口提供的DOM和普通窗口不同吗？其实模态窗口的DOM和普通窗口是相同的，而不同之处是当模态窗口中的页面装载完成后，document.title属性确实会失效。这就是为什么在上面的示例代码onload事件中的语句无效的原因。解决这个限制的方法很简单，就是要在页面还未装载完成时就修改document.title，所以在模态窗口中修改IE标题栏就因该使用这样的代码：
&html&&body&&&&&&!--&page&content&--&&&&&&script&language="javascript"&&&&&&&&&document.title&=&"birdshome's&homepage"；&&&&&/script&&/body&&/html&
&&& 下面是一个包含了以上两种修改浏览器标题栏方法的示例，将其保存为"abc.htm"文件，使用IE打开你就能很直观看到区别：
&html&&body&&&&&&button&onclick="foo()"&&&&&&&&&Open&/button&&&&&&script&language="javascript"&&&&&document.body.onload&=&function()&&&&{&&&&&&&&document.title&=&"birdshome's&homepage&(rewrite)"&+&unescape(H_A0);&&&&};&&&&document.title&=&"birdshome's&homepage&(first)"&+&unescape(H_A0);&&&&function&foo()&&&&{&&&&&&&&window.showModalDialog("abc.htm");&&&&}&&&&&/script&&/body&&/html&
&&& 结果是普通IE窗口的标题栏会从"birdshome's homepage (first)"快速的变为"birdshome's homepage (rewrite)"，而使用Open按钮开启的模态对话框的标题将一直是"birdshome's homepage (first)"。从这个示例中我们可以看出来，对于普通IE窗口，其标题栏是可以在页面生存期的任意时刻进行修改的。而模态窗口的标题栏，我们只能在其页面装载完成前(onload事件触发前)才能修改。非模态对话框，opend by showModelessDialog，对于标题栏的处理和模态对话框完全一样。&&& 最后再说一个document.title使用中的技巧，我们知道如果在服务器端"动态"修改页面title时，我们可以向&title&&/title&标签间写入&来在标题栏上产生连续的空格输入效果。这个技巧在模态窗口中尤为有用，这样一来我们就可以把那讨厌的" - Web Page Dialog"字样用连续空格推到标题栏外去。使用document.title属性来修改页面标题栏后，不管是普通窗口还是模态窗口，"&"和" "(空格)都不能用了，前者会被直接当字符串显示在标题栏上，后者添加再多也只有一个" "(空格)的宽度效果。这里我们又要使用另一个空格，实体 来解决这个问题。代码如下：
&html&&body&&&&&&script&language="javascript"&&&&&var&HexA0s&=&"%A0&%A0&%A0&%A0";&&&&&&&&document.body.onload&=&function()&&&&{&&&&&&&&document.title&=&"birdshome's&homepage&(rewrite)"&+&unescape(HexA0s);&&&&};&&&&&/script&&/body&&/html&
&&&  还真是个好东西，另一个使用它来解决的问题是：您的位置：&&html布局的一种宽度自适应解决方案
目前市面上的显示器分辨率是越来越大，而对网页显示而言意味着一屏可以显示更多的内容『一屏：网页右边没有滚动条、下边也没有滚动条浏览器最大化所可以显示内容区域；这不是一个正规词汇，仅为此文方便书写而生造』。对html布局而言，传统的960px『或者鄙人常用的980px』宽度在大分辨率显示上显示时左右两边则会留下富余的空白空间，当分辨率达到23寸的1920px时传统的980px宽度网页布局则意味着显示器上的一半宽度的位置被闲置......考虑到17寸非主流脑残显示器依然占有不少的份额，同时为大分辨率显示器做适当的适配，一种网页宽度自适应布局应运而生，本文所说的宽度自适应仅仅指pc端的宽度自适应。理论基点：1、最小尺寸分辨率（传统17寸显示器），则可以采用940px、960px、或者鄙人常用的980px作为最小宽度2、之后稍大的分辨率就是了，则可以采用1200px或者1220px作为稍大的网页宽度3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签4、不支持css3、html5的脑残浏览器特别是&=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。6、宽度自适应为不同宽度显示器写布局元素时常用的css
.wrap { display:none;}.wrapBig .xxx { width:xxpx;}.wrapSmall .xxx { width:xxpx;}
实现方式：1、高级浏览器方式，通过media Queries直接控制，比如控制宽度的div类名叫wrap，则有如下代码，此代码仅作抛砖引玉
/**max width 980px**/@media screen and (max-width:1200px) { .wrap { width:980px; }}/**max1280px screen***/@media screen and (min-width:1200px) { .wrap { width:1200px; }}
稍微解释下：第一段当浏览器的可显示区域宽度小于1200px时就将类名为wrap的宽度设置为980px，当浏览器的可显示区域大于1200px时则将类名为wrap的宽度设置为1200px。css3的media queries可以通过拖拽浏览器窗口大小即时显示效果！这样在17寸显示器上时就不会在浏览器的下方出现滚动条，而在大于17寸的显示器上时可以让网页布局宽度增大到1200px，显示更多的内容。2、低级脑残浏览器通过js实现，为了便于调试，同时采用resize事件让网页跟随浏览器窗口大小改变而改变布局元素的宽度，如下代码也进做抛砖引玉
var windowSize=function () { var winWidth,winHeight; //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口大小 if (document.documentElement && document.documentElement.clientHeight &&document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //返回对象结果 return {'width':winWidth,'w':winWidth,'height':winHeight,'h':winHeight};}//上述代码通过windowSize方法返回当前浏览器一屏窗口的宽度与高度【注意此处一屏的概念】$(document).ready(function ()
{ var PageStyle= function () { var SysWidht = windowSize().width,wrap=$('.wrap');//此处也可以使用jquery的$(window).width()获取页面宽度 if(SysWidht&1200) { wrap.removeClass('wrapBig').addClass('wrapSmall'); }else { wrap.removeClass('wrapSmall').addClass('wrapBig'); } }; /*init*/ PageStyle(); /*event*/ $(window).resize(function () { PageStyle(); });});//注意，此处引用了jquery ！！！//上述代码在页面加载完毕后自动调节类名为wrap的布局元素的类名称 然后在css中依据不同的类名写css代码
稍微解释下原理：通过js读取浏览器的窗口一屏大小，然后调节关键的类名为wrap的布局标签的类名，然后在css中书写相关宽度代码，因为采用了jquery的resize方法[实际就是resize事件]，利用该事件当浏览器窗口大小改变时执行相关代码。那么此段代码放在页面核心js中时势必会在所有浏览器中都执行，这个时候可以使用ie独有的hack触发，假设上述js代码写入在一个单独的js文件中，html中的示例代码如下
&!DOCTYPE html&&!--[if lte IE 6 ]& &html class="ie ie6 lte_ie7 lte_ie8" lang="zh-CN"& &![endif]--&&!--[if IE 7 ]& &html class="ie ie7 lte_ie7 lte_ie8" lang="zh-CN"& &![endif]--&&!--[if IE 8 ]& &html class="ie ie8 lte_ie8" lang="zh-CN"& &![endif]--&&!--[if IE 9 ]& &html class="ie ie9" lang="zh-CN"& &![endif]--&&!--[if (gt IE 9)|!(IE)]&&!--&&html lang="zh-CN"& &!--&![endif]--&&head&&meta charset="UTF-8"&&meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/&&title&宽度自适应 -demo&/title&&meta name="author" content="Jea Yang(http://blog.jjonline.cn)"/&&meta name="description" content=""/&&meta name="keywords" content=""/&&meta name="viewport" content="width=device-width"/&&link rel="stylesheet" href="./Public/Style/reset.css"/&&script type="text/javascript" src="./Public/Js/jquery-1.8.1.min.js"&&/script&&!--[if lt IE 9]&&script src="./Public/Js/html5.js"&&/script&&script src="./Public/Js/lte-ie8.js"&&/script&&![endif]--&&/head&
上述html代码中的&!--[if lt ie 9]--&&![endif]--&之间引入该js文件即可；不再多做解释如此，低级脑残浏览器下的则相关核心css代码则如下：
/**for ie adjust width auto commen**/.wrapBig { width:1200px; margin:0 auto;}.wrapSmall { width:980px; margin:0 auto;}
对脑残低级浏览器如此处理后，当拖拽脑残低级浏览器的窗口大小时页面布局也会跟随变化。===============此文仅作原理阐述
转载请注明本文标题和链接：《》
邮箱（必填）
网址（选填）辉煌6T1818智能马桶组合测评
&店询销量:1999
迪尔雅SF29D-175双盆浴室柜评测
&店询销量:1326
西马V65T智能马桶测评
&店询销量:2699
惠达通用马桶盖板
九牧虹吸式抽水马桶
￥899￥2498
高仪 维达利智能恒温淋浴花洒龙头套装
￥1899￥11850
摩恩304不锈钢厨房置物架
通用加厚坐便器盖板
￥18.9￥80
免打孔太空铝浴巾架套装
即热式全自动智能马桶盖
￥999￥2996
厨房单冷水龙头
￥13.5￥67.5
维卫vivi无水箱智能马桶
￥3999￥13688
GLLO洁利来红外线智能感应式水龙头
￥1399￥4598
欧路莎智能马桶一体式座便器
￥2980￥12450
恒洁卫浴Q8智能马桶
￥4666￥4766
你好，我目前是经销卫浴配件的，我想问一下想要做威迪亚水件区域代理商需要什么条件？我是山西临汾的。...
租的房子已经装了你们的pentair，想知道水是否可以直接饮用了。...
我知道吉博力的水箱很好，但是它没有马桶，总不能买个水箱单独配吧...
我是李鹏伟,
电话:1551502****,
在河南安阳,
计划投资20万人民币,
加盟品牌专卖店,请联系我。
【已回复】
我是许闽生,
电话:1566992****,
在浙江温州,
计划投资20万人民币,
加盟零售店,请联系我。
【已回复】
我是许闽生,
电话:1566992****,
在浙江温州,
计划投资20万人民币,
加盟零售店,请联系我。
【已回复】
我是许闽生,
电话:1566992****,
在浙江温州,
计划投资20万人民币,
加盟零售店,请联系我。
【已回复】
我是豆战新,
电话:1599329****,
在河南周口,
计划投资50万人民币,
加盟区域总代理,请联系我。
【已回复】
电话:1585583****,
在安徽阜阳,
计划投资50万人民币,
加盟区域总代理,请联系我。
【已回复】
我是王以刚,
电话:1399078****,
在四川南充,
计划投资10万人民币,
加盟品牌专卖店,请联系我。
【已回复】
我是王以刚,
电话:1399078****,
在四川南充,
计划投资10万人民币,
加盟品牌专卖店,请联系我。
【已回复】
电话:1367661****,
在浙江衢州,
计划投资50万人民币,
加盟品牌专卖店,请联系我。
【已回复】
电话:1785888****,
在浙江宁波,
计划投资20万人民币,
加盟品牌专卖店,请联系我。
【已回复】
&国内品牌&
&国际品牌&
扫描关注卫浴热点
全国免费服务热线：400-661-8887他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)查看: 3409|回复: 2
EXTJS: 自定义标题栏按钮
论坛徽章:0
请问， extjs 里的window， 能不能自定义标题栏（就是右上角的最大化，最小化，叉叉那一栏）里的按钮
接口是什么，或者转个例子什么的，谢谢诶
论坛徽章:131
论坛徽章:0
大家好，我是猎头cindy,目前有java高级开发工程师的职位，
1. 学历背景：正规大学本科或以上学历，计算机相关专业毕业；
2. 工作经验：6年以上软件开发及设计经验，其中2年以上大型应用系统的分析和设计经验；
3. 技术能力：
- 精通J2EE架构技术，熟练掌握主流技术框架，Struts/Spring/Hibernate等；
- 熟练掌握Oracle等数据库的分析和设计；
职位很急，而且人数不限，有兴趣的朋友尽快联系我阿，是base北京的，我的msn:
或者直接把简历发到,看到邮件我会尽快与您取得联系！
itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有　　　　
　北京市公安局海淀分局网监中心备案编号：10　广播电视节目制作经营许可证：编号（京）字第1149号