跨浏览器的 Array.prototype.sort 的使用姿势

自定义比较函数时,因为 IE 下方法返回的值必须是 0 , -1 , 1 ,分别对应等于、第一个参数排在前面和第一个参数排在后面的情况。而 chrome 等 webkit 浏览器下是 0 (false) 和 -1 一样,都代表第一个参数排前面。array1.sort(); 的默认结果是升序排序。


var a = new Array(4, 11, 2, 10, 3, 1);

var b = a.sort();
document.write(b);
document.write("<br>");

// 这是 ASCII 字符顺序.
// 输出: 1,10,11,2,3,4

// 按照一个比较数组原书的函数来排序
b = a.sort(CompareForSort);
document.write(b);
document.write("<br>");
// Output: 1,2,3,4,10,11.

// 自定义升序排序的比较函数
function CompareForSort(first, second)
{
if (first == second)
return 0;
if (first < second)
return -1;
else
return 1;
}

// 升序排序比较函数的简短版本
function CompareForSort(first, second)
{
return first < second ? -1: 1;
}

参考

sort 方法 (Array) (JavaScript) – Internet Explorer 开发人员中心

怎样制作中间镂空的遮罩

SVG 版

最方便,兼容性最好的办法。方便镂空多个洞。代码来自 www.zhoumingzhi.com

镂空一个洞的代码


<div id="container" style="position: relative; margin: 550px 0 0 50px;">
<svg style="position: absolute;" width="400" height="280">
<defs>
<mask id="mask3">
<rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
<circle id="circle1" cx="100" cy="100" r="50" style="fill: #000" />
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: #ccc; mask: url(#mask3)"></rect>
</svg>
<img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />
</div>

镂空多个洞的代码


<div id="container" style="position: relative;">
<svg style="position: absolute;" width="400" height="280">
<defs>
<mask id="mask3">
<rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
<circle id="circle1" cx="100" cy="50" r="50" style="fill: #000" />
<circle id="circle1" cx="300" cy="100" r="50" style="fill: #000" />
<circle id="circle1" cx="100" cy="200" r="50" style="fill: #000" />
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: #ccc; mask: url(#mask3)"></rect>
</svg>
<img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />
</div>

Canvas 版

当镂空的形状比较复杂时,用 Canvas 的 globalCompositeOperation 是最终极的办法。当然 Canvas 也会有兼容性问题。

CSS clip 版

优点是所有浏览器都支持。缺点是更像是裁剪,只能遮罩特定的对象,而且只能镂空一个洞。

CSS 代码


#img1
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}

HTML 代码


<img border="0" id="img1" src="/i/eg_bookasp.gif" width="120" height="151">

-webkit-mask 版

有前缀,而且其作用就是相当于在上面盖了一个图片,鸡肋一样的属性。如果直接盖一个图片的话,可以兼容所有场景和所有浏览器。-webkit-mask 实例代码来自 http://webengine.sinaapp.com/jian/

{
-webkit-mask: url(http://webengine.sinaapp.com/jian/images/mask.png) no-repeat center -10px;
-webkit-mask-size: 500px 750px;
}

CSS3 版

用 box-shadow ,代码如下:

position: fixed;
left: 150px;
top: 35px;
width: 100px;
height: 100px;
border-radius: 100px;
box-shadow: rgba(0,0,0,.8) 0px 0px 0px 2005px;
z-index: 100;

缺点是只能镂空一个洞。

IE8 及以下的传统版

有点是兼容性最强,形式随意,可以镂空任意个洞。缺点是给人感觉这种工作很 low,而且事实上确实乏味、辛苦而又没有技术含量。
在镂空区域的左、上、右、下分别放一个半透明 div 作为遮罩。
div 背景用滤镜半透明, IE7+ 可以用 png8 半透明图片来代替。

顽固守旧者的福音:用 CSS3 MediaQueries JS 和 CSS3 做跨浏览器弹性布局

为什么

本文诠释一种纯 CSS3 + 现成 javaScript 的兼容旧浏览器的弹性布局的制作方法。

做弹性布局时,为了兼容性(IE6、IE7、IE8),一般都是用 JavaScript 绑定 window.onresize 。这样虽然行得通,却有点浪费支持 CSS3 的先进浏览器。

而引入 CSS3 MediaQueries JS ,就能使低级浏览器完美支持 css3 的 media query 。一套代码,处处可用,把兼容性问题都丢给轮子去解决吧!

CSS3 MediaQueries JS 开发于 2008 年。支持 IE 5+, Firefox 1+ and Safari 2 。IE9+, Firefox 3.5+, Opera 7+, Safari 3+ 和 Chrome 已经原生支持 media query 了。

使用方法

在 body 之前插入如下代码,条件性判断应该也可以省略不要:

<!--[if lt IE 9]><script src="css3-mediaqueries.js"></script><![endif]—>

注意事项

  1. 不支持 @import ;
  2. 对 <link> 和 <style> 标签内的 media 属性无效;
  3. 以上两条来自官方 readme ;
  4. 不要用一些奇怪的、明显冲突的 CSS;
  5. 如果布局乱了,先从自己 CSS 代码的浏览器兼容性找原因;
  6. 以上两条为博主 debug 的经验。

示例

网易博客时事二级页 http://blog.163.com/special/001264EF/sec-page-community.html
宽屏四列布局窄屏三列布局

地址

CSS3 MediaQueries JS 最早的项目地址是 http://code.google.com/p/css3-mediaqueries-js/ ,现在已经在 Github 上经过很多人的修改了,目前可以在此访问到使用说明和源代码: https://github.com/livingston/css3-mediaqueries-js

参考文档

[跨浏览器]血量技能可替换的三国杀武将卡牌

工作的时候切的,用不上了……作为三国杀爱好者,贴出来供观摩吧…… 素材版权归设计师所有,创意版权也归原作者所有哈!

切好后,发现直接改 PSD 输出静态图片就行了,比这个快、随意,而且编辑不会改烂而带来心里挫败感。

本页面兼容 Internet Explorer 6 及其它更高级浏览器,技能个数、技能名、技能描述、武将名、武将说明、武将血量、武将图片以及卡牌背景皆为可替换的,点击图片在新窗口查看 三国杀武将卡牌 DEMO。

image

页面代码及注释请看 https://www.bokeyy.com/wp-content/uploads/2013/01/sgscard.html

最后,亮点在于,半透明的血点点由于用了半透明的 PNG8 格式,只有 Fireworks 才能生成的那种,所以在 Internet Explorer 6 下面没有用滤镜也不会出现灰边喔!

JavaScript 判断是否当前活动窗口

搜索了一下没找到很正经说这件事情的跨浏览器方案,但其实这个方法很多人都会的,就是用 window.onfocus 和 window.onblur 函数来实现,支持本人 Windows XP 机器上的 Opera 12.10 、Safari 5.1.7 、 Chrome  24.0.1312.52 m 、 Firefox 18.0.1 和 Internet Explorer 6  ,点此在新窗口打开 Demo ,最小化一下窗口再切换回去就能看到效果(是个无限的 alert ,只能用任务管理器关掉)。

Demo 代码如下:

var statStr = '';
window.onblur = function(){
    statStr += "blur ";
    }
window.onfocus = function(){
    statStr += "focus ";
    alert(statStr);
    }

原理就是定义一个空的字符串 statStr ,每当 onblur 事件触发的时候就在后面接一个 “blur ”,每当 onfocus 事件触发的时候就在后面接一个 “focus ”,这样可以判断最小化及切换窗口的时候各个浏览器对这俩事件的触发情况。事实证明,尽管最后得到的字符串略有不同,但所有的浏览器在窗口状态切换的时候至少会触发一次这两个事件中的一个。

最后,既然都能触发,就用它来做想做的事情吧!

跨浏览器无拦截 AJAX 回调弹窗

需求

用户点击“提交”后,若 AJAX 提交接口提示成功,则弹出某个汇总页的窗口。

原理

所有浏览器都不会拦截用户主动促发事件中的弹窗。一般认为,“用户主动促发”只包含 click 和 submit 。所以在 click 事件打开一个空白的新窗口,可以是一个写有 loadding title 的空白页面:

var newWin = window.open("loadding Url");

若 AJAX 成功后,用回调函数将刚刚打开窗口的 url 改成目标地址:

newWin.location.href = "target url";

否则,关闭该窗口:

newWin.close();

由于 AJAX 所需的时间并不长,虽然分了两步,用户看起来却几乎是流畅的。

兼容IE

实践这个方法会发现 IE 报错提示权限不足,这时需要将:打开弹窗的页面、弹窗的 loadding 页面 和 弹窗的目标页面都设置在同一域名下。例如,都加上代码:

document.domain="163.com";

来源

感谢清华高材生 @weixiaoquan 童鞋的主意。类似思路应可应用于非 AJAX 回调的其它需要无拦截弹出窗口的场合上。

兼容 IE 的时间日期构造函数

在除了 IE 的浏览器下,直接这样写:

var date = new Date("2011-11-07");

IE 下 date 会是 NaN,所以用下法替代:

function NewDate(str)
         {str=str.split('-');
          var date=new Date();
          date.setUTCFullYear(str[0], str[1]-1, str[2]);
          date.setUTCHours(0, 0, 0, 0);
          return date;
         }

 

同理可以加上时间:

    function newDateAndTime(dateStr){
        var ds = dateStr.split(" ")[0].split("-");
        var ts = dateStr.split(" ")[1].split(":");
        var r = new Date();
        r.setFullYear(ds[0],ds[1] - 1, ds[2]);
        r.setHours(ts[0], ts[1], ts[2], 0);
        return r;
    }

参考

http://stackoverflow.com/questions/2182246/javascript-dates-in-ie-nan-firefox-chrome-ok
http://www.w3school.com.cn/js/jsref_obj_date.asp

[笔记]跨浏览器前端字数截断

字数截断还是后端做比较好,既跨浏览器又省流量。当然,有时前端做更有优势。例如 AJAX 取 json 数据生成链接时,链接显示宽度有限,但是链接的 title 又需要是完整的文字等。可以这样定义 CSS :

width: (钉死的宽度值);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

这样,如果字数超出钉死的宽度里面可以显示的范围,浏览器就会自动显示成:

XXXXX…

其中,省略号的样式依各浏览器的不同而不同。

[兼容各浏览器]跨编码提交表单

accept-charset

form 内容会按 accept-charset 的属性编码以后再提交给服务器,例如:

<form action="form_action.asp" accept-charset="ISO-8859-1">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

但不支持  IE 。

 

onsubmit=”document.charset=’utf-8′;”

onsubmit=”document.charset=’utf-8′;” 在 IE 下相当于 accept-charset=’utf-8′

 

总结

以上两个写在一起即可兼容所有浏览器。

 

参考

HTML form 标签的 accept-charset 属性 http://www.w3school.com.cn/tags/att_form_accept_charset.asp

用 form 提交不同编码的数据 http://iiu.me/archives/94

 

例子

2012年春运_网易专题 http://news.163.com/special/chunyun2012/

image

 

 

[兼容IE各版本] 同时使用多个 IE 滤镜

当 CSS3 遇上较低版本 IE,滤镜就成了实现兼容性的折衷方案之一。虽然滤镜是过时很久的技术了,但还是能看出微软的高瞻远瞩——早在 IE6 就用滤镜实现了 bug 丛生的 CSS3 特性。

以下是 MSDN 《Alpha Filter》 中同时使用多个滤镜的示例,适合各个 IE 版本。滤镜之间使用空格或者回车隔开(DEMO):

<DIV STYLE="width:100%; filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3);">
        Blurry text with smudge of gray.</div>

然而,由于滤镜本身的缺陷,这种组合时不时会有意想不到的效果。例如,单独使用  shadow 滤镜是给盒子里的文字加阴影特效的(DEMO):

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">测试文字</div>

配合 Glow 滤镜也很正常,可以加上发光效果(DEMO):

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.Glow(Color=red,Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">测试文字</div>

然而,再加上 Gradiant 滤镜,所有的效果就都加在 div 盒子而不是文字上的了 (DEMO):

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorstr=#fff, endColorstr=black)
progid:DXImageTransform.Microsoft.Glow(Color=red,Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">测试文字</div>

这或许是因为 Gradiant 滤镜单独使用时就是只会应用在盒子上(DEMO)?

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled,startColorstr=#fff, endColorstr=black)">测试文字</div>

总结

有的时候此法不好用,在于 IE 的滤镜本身。比如 IE 的 Shadow 滤镜和 Gradiant 滤镜配合只作用于盒子。退一步说,即便 Shadow 单独使用是文字阴影,有时也能看到难看的杂色(见配图,配图来自 鑫空间)。这里的“有时”和滤镜及文字所用的颜色以及浏览器都有关系。

灰色光晕下的效果 张鑫旭-鑫空间-鑫生活

鑫空间 的文章 《IE下实现类似CSS3 text-shadow文字阴影的几种方法》  推荐的,使用两段一模一样的文字交叠显示才是最终无 bug 阴影的跨浏览器解决方案。

参考资料

Alpha Filter http://msdn.microsoft.com/zh-cn/library/ie/ms532967(v=vs.85).aspx
Applying Filters (Windows Embedded CE 6.0) http://msdn.microsoft.com/zh-cn/library/ee492403.aspx