你知道世界上有多少种浏览器吗？除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外，世界上还有近百种浏览器。 几天前，浏览器家族有刚诞生了一位小王子，就是Google推出的Chrome浏览器。由于Chrome出生名门，尽管他还是个小家伙，没有人敢小看他。以后，咱们常说浏览器的“四大才子”就得改称为“五朵金花”了。 在网站前端开发中，浏览器兼容性问题本已让我们手忙脚乱，Chrome的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。 JavaScript是前端开发的主要语言，我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下，值判断出浏览器类型之后，还需判断浏览器版本才能处理兼容性问题，而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。 我们先来分析一下各种浏览器的特征及其userAgent。 IE 只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是ActiveXObject函数。只要判断window对象存在ActiveXObject函数，就可以明确判断出当前浏览器是IE。而IE各个版本典型的userAgent如下： Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0) Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Mozilla/4.0 (compatible; MSIE 5.0; Windows NT) 其中，版本号是MSIE之后的数字。 Firefox Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小（IE对应的中是getBoundingClientRect函数）。这是Firefox独有的，判断它即可知道是当前浏览器是Firefox。Firefox几个版本的userAgent大致如下： Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1 Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3 Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12 其中，版本号是Firefox之后的数字。 Opera Opera提供了专门的浏览器标志，就是window.opera属性。Opera典型的userAgent如下： Opera/9.27 (Windows NT 5.2; U; zh-cn) […]
View Details下面是我整理的一些userAgent大家先看看格式 //Firefox 1.0.XMozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915 Firefox/1.0.7//Firefox 1.XMozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20060109 Firefox/1.5 (pigfoot) Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2Mozilla/5.0 (Windows; U; […]
View Detailsfunction isArray(o) { return Object.prototype.toString.call(o) === '[object Array]'; } 判断更多特殊类型： var is = { types : ["Array","RegExp","Date","Number","String","Object","HTMLDocument"] }; for(var i=0,c;c=is.types[i++];){ is[c] = (function(type){ return function(obj){ return Object.prototype.toString.call(obj) == “[object "+type+"]“; } })(c); }
View Details设置为首页： <a href="#" onClick="this.style.behavior=’url(#default#homepage)';this.setHomePage('这里面写上你自己主页就可以了')">设置为首页</a> 个人理解：其中behavior是css属性，设置url为ie默认（default）动作。setHomePage是设置或返回主页的路径。 加入收藏夹 <a href="javascript:window.external.AddFavorite('这里面写上要加入收藏夹的地址就可以了', '收藏夹里显示的文字描述信息');">加入收藏夹</a>
View Details1.window.event.keyCode的用法： 例子、<input type="text" onkeydown="javaScript:if(window.event.keyCode==13) kenNumIE();" /> <script language="javascript" type="text/javascript"> function kenNumIE(){ alert("你按的是回车键！"); } </script> 但是该方法只对IE有效，原因是Firefox的window对象没有event属性，所以window.event是不存在的，Firefox只能在事件句柄函数的第一个参数获取事件对象。2.兼容Firefox的方法：<input type="text" onkeydown="return keyNumAll(event);" > <script language="javascript" type="text/javascript"> function keyNumAll(evt){ var k=window.event?evt.keyCode:evt.which; if(k == 13){ alert("你按的是回车键！"); } } </script> 这样，当你按回车键时，就可以触发keyNumAll(event)事件了。 附：window.event.keyCode 集合(键盘字符的Ascii)： XML/HTML代码 Ascii 代码表 Ascii 0 {Nulo, Sem Som} Ascii 1 Ascii 2 Ascii 3 Ascii 4 Ascii 5 Ascii 6 Ascii 7 Ascii 8 {BackSpace} Ascii 9 {Tab} Ascii 10 Ascii 11 Ascii 12 Ascii 13 {Enter} Ascii 14 Ascii 15 Ascii 16 {Shift} Ascii 17 {CTRL} Ascii 18 {ALT} Ascii 19 Ascii 20 {CapsLock} Ascii 21 Ascii 22 Ascii 23 Ascii 24 Ascii 25 Ascii 26 Ascii 27 Ascii 28 Ascii 29 – Ascii 30 – Ascii 31 Ascii 32 {Espa?o} ! Ascii 33 " Ascii 34 # Ascii 35 $ Ascii 36 % Ascii 37 & Ascii 38 ' Ascii 39 ( Ascii 40 ) Ascii 41 * Ascii 42 + Ascii 43 , Ascii 44 – Ascii 45 . Ascii 46 / Ascii 47 0 Ascii 48 1 Ascii 49 […]
View Detailsie,chrome可能通过JS的onselectstart 例如代码如下:<body onselectstart="return false"> firefox可以通过CSS 代码如下: *{ -moz-user-select:none }
View Details最重要的三段代码如下： view plaincopy to clipboardprint?01.<mce:script type="text/javascript"><!-- 02. 03. var HKEY_Root,HKEY_Path,HKEY_Key; 04. HKEY_Root="HKEY_CURRENT_USER"; 05. HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; 06. //设置网页打印的页眉页脚为空 07. function PageSetup_Null() 08. { 09. try { 10. var Wsh=new ActiveXObject("WScript.Shell"); 11. HKEY_Key="header"; 12. Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); 13. HKEY_Key="footer"; 14. Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); 15. } catch(e){} 16. } 17. //恢复网页打印的页眉页脚 18. function PageSetup_default(){ 19. try { 20. var Wsh=new ActiveXObject("WScript.Shell"); 21. HKEY_Key="header"; 22. Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码,&p/&P"); 23. HKEY_Key="footer"; 24. Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d"); 25. }catch(e){} 26. } 27. function printsetup(){ 28. // 打印页面设置 29. wb.execwb(8,1); 30. } 31. function printpreview(){ 32. // 打印页面预览 33. PageSetup_Null(); 34. wb.execwb(7,1); 35. } […]
View Details浏览器窗口宽：document.documentElement.clientWidth 浏览器窗口高：document.documentElement.clientHeight 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 IE，FireFox 差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5： clientWidth = width – border clientHeight = height – border offsetWidth = width offsetHeight = […]
View Details匹配中文字符的正则表达式： [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内)：[^\x00-\xff] 应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1） String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;} 匹配空行的正则表达式：\n[\s| ]*\r 匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/ 匹配首尾空格的正则表达式：(^\s*)|(\s*$) 应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下： String.prototype.trim = function(){return this.replace(/(^\s*)|(\s*$)/g, "");} 利用正则表达式分解和转换IP地址： 下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序： function IP2V(ip){re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正则表达式if(re.test(ip)){return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1}else{throw new Error("Not a valid IP address!")}} 不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下： var ip="10.100.20.168"ip=ip.split(".")alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1)) 匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w– ./?%&=]*)? 利用正则表达式去除字串中重复的字符的算法程序：[注：此程序不正确，原因见本贴回复] var s="abacabefgeeii"var s1=s.replace(/(.).*\1/g,"$1")var re=new RegExp("["+s1+"]","g")var s2=s.replace(re,"") alert(s1+s2) //结果为：abcefgi 我原来在CSDN上发贴寻求一个表达式来实现去除重复字符的方法，最终没有找到，这是我能想到的最简单的实现方法。思路是使用后向引用取出包括重复的字符，再以重复的字符建立第二个表达式，取到不重复的字符，两者串连。这个方法对于字符顺序有要求的字符串可能不适用。 得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1 s="http://www.9499.net/page1.htm"s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2")alert(s) 利用正则表达式限制网页表单里的文本框输入内容： 用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,")" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,"))" 用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,")" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,"))" 用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^\d]/g,") "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,"))" 用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,") "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,"))"
View Details标题有些唬人的成分，因为这里跨的只是子域名。 事情的经过是这样的，还是那个个人门户网站。其中有个功能就是RSS订阅，每个订阅作为一个模块出现在页面上。如果一个用户订阅了比较多的RSS，则在打开页面时所有的RSS模块就会开始加载，这时候可能就会需要十几秒甚至更长的时间才能加载完毕。这时，如果用户需要作别的AJAX操作——比如保存页面设置——那么长时间的等待就不可避免了，谁让浏览器对于相同域名只能同时存在两个连接呢？不过这可不是一个好的用户体验，那么我们需要怎么做呢？ 第一种做法可能比较容易想到，我们可以自己编写代码维护一个Priority Queue，为每个请求附加一个“优先级”信息，这样我们就可以把重要的请求率先发出。这样就可以在一定程度上解决用户的等待问题。可惜这个方法还是无法突破两个连接的限制。于是第二种做法，我们就要设法突破两个连接的限制了。如果能够向别的域名发出AJAX请求，不也就能避免重要的请求被大量的请求所阻塞了吗？ 我们还是从头看起，一点一点地来解决这个问题。 传统的跨域名异步请求解决方案 AJAX安全性的唯一保证，似乎就是对于跨域名（Cross-Domain）AJAX请求的限制。除非打开本地硬盘的网页，或者在IE中将跨域名传输数据的限制打开，否则向其他域名发出AJAX请求都会被禁止。而且对于跨域名的判断非常严格，不同的子域名，或者相同域名的不同端口，都会被认作是不同的域名，我们不能向它们的资源发出AJAX请求。 从表面上看起来似乎没有办法打破这个限制，还好我们有个救星，那就是iframe！ iframe虽然不在标准中出现，但是由于它实在有用，FireFox也“不得不”对它进行了支持（类似的还有innerHTML）。网上已经有一些跨域名发出异步请求的做法，但是它们实在做的不好。它们的简单工作原理如下：在另一个域名下放置一个特定的页面文件作为Proxy，主页面将异步请求的信息通过Query String传递入iframe里的Proxy页面，Proxy页面在AJAX请求执行完毕后将结果放在自己location的hash中，而主页面会对iframe的src的hash值进行轮询，一旦发现它出现了改变，则通过hash值得到需要的信息。 这个方法的实现比较复杂，而且功能有限。在IE和FireFox中，对于URL的长度大约可以支持2000个左右的字符。对于普通的需求它可能已经足够了，可惜如果真要传递大量的数据，这就远远不够了。与我们一会儿要提出的解决方案相比，可能它唯一的优势就是能够跨任意域名进行异步请求，而我们的解决方案只能突破子域名的限制。 那么现在来看看我们的做法！ 优雅地突破子域名的限制 我们突破子域名限制的关键还是在于iframe。 iframe是的好东西，我们能够跨过子域名来访问iframe里的页面对象，例如window和DOM结构，包括调用JavaScript（通过window对象）——我们将内外页面的document.domain设为相同就可以了。然后在不同子域名的页面发起不同的请求，把结果通过JavaScript进行传递即可。唯一需要的也仅仅是一个简单的静态页面作为Proxy而已。 我们现在就来开始编写一个原形，虽然简单，但是可以说明问题。 首先，我们先来编写一个静态页面，作为放在iframe里的Proxy，如下： Copy code<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Untitled Page</title> <script type="text/javascript" language="javascript"> document.domain = "test.com"; function sendRequest(method, url) { var request = new XMLHttpRequest(); request.open(method, url); request.send(null); } </script></head><body> </body></html> 然后我们再编写我们的主页面： Copy code <html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <script type="text/javascript" language="javascript"> document.domain = "test.com"; function simpleRequest() { var request = new XMLHttpRequest(); request.open("POST", "Script.ashx"); request.send(null); } function crossSubDomainRequest() { var proxy = document.getElementById("iframeProxy").contentWindow; proxy.sendRequest('POST', 'http://sub0.test.com/Script.ashx'); } […]
View Details