iframe是可以做的事情非常多，比如通过iframe实现跨域，使用iframe解决IE6下select遮挡不住的问题，通过iframe解决Ajax的前进后退问题，再比如通过iframe实现异步上传。在很早我就写过一篇文章说明了Iframe在IE、firefox下的一些DOM操作。今天结合最近项目中遇见的iframe问题，再来谈谈iframe的一些常见问题解决方案。
IE下iframe背景透明问题
在firefox下，iframe背景默认的是透明的，在IE下默认不是透明的，我们可以使用allowTransparency='true' 来设置IE下的iframe为透明，另外我们使用scrolling ='no' frameborder='0'分别来实现iframe页面没有滚动条，边框宽度。
IE6下iframe不显示的问题
不得不说IE6是个操蛋的浏览器，尤其是在中国！iframe有的时候在IE6中会出现不显示的问题，主要有以下几种原因，请一一排查：
- 可能你的iframe没有设置宽高，例如在table不居中，计算不出来td的高度，会导致这种问题
- 尝试使用下面的代码来重新载入IE6下的iframe页面：
setTimeout(function(){
document.frames['fuckIE6'].location.reload();
},0)
- 传闻iframe标签中不要把src紧跟在iframe之后，也就是
<iframe src='js8.in' name='fuckIE6'></iframe>是错误的，不过我没有碰见过类似的问题，为了保险起见，还是不要写成上面的样式为妙。
继续阅读全文……
今天开始给网站首页的广告管理系统添加flash广告代码，结果出现IE中（包括IE6+）弹窗广告要flash遮挡的问题，后来想到了常用的iframe方法（参见《解决IE6 select z-index无效，遮挡div的bug》），最终成功了flash遮挡DIV的bug，但是在IE中还出现了浮动的DIV变化位置后，flash出现div碎片的拖尾现象。继续寻找解决方案。最后终于找了原来flash有个参数wmode可以设置，于是代码变成了这样：
<embed src=”s.swf” quality=”high” wmode=”Opaque” width=”150″ height=”240″></embed>
于是IE中Flash遮挡DIV的问题成功解决了，看图：
flash遮挡div问题的解决方案
订阅更“健康”
最近一次的开发中遇到了IE下setTimeout传参数的问题，在IE下setTimeout是不会传参数的，例如下面的代码，在IE下就不会传入a,b两个参数
setTimeout(function(a,b){
alert(a+b);
},1000,'hello,','world!');在实际项目中我们有些需求必须传入参数要setTimeout的function进行处理，那么我们就需要利用js的call及其apply的方法，来解决IE下的setTimeout传参bug：
继续阅读全文……
昨天同事负责一个首页广告，广告采用的是多帧GIF动画，在HTML演示页面中采用的是jpg，运用Image对象的load事件来加上广告，这样就避免了广告播放出来而图片还没有加载完成的尴尬局面，但是却遇到了一个超级郁闷的事情，那就是在IE中load事件不停的执行，找了很多原因，最后在google上找到了：原来是多帧GIF引起的Image().load事件重复触发的问题。又一次长见识了！而且还有人发帖说可以通过这个bug来模拟js的多线程~
解决方法：
var img=new Image();
img.load=function(){
//do something
img.load=null;//重新赋值为null
}
img.src='××.gif';
今天遇到了IE一个onchange事件的bug，此bug存在于IE所有的版本（6,7,8）不知道是不是bug，还是IE故意这样设计的？姑且不做评价，我们来看看IE onchange事件的重现过程：
给input等控件添加onchange事件，例如input的checkbox（radio等），在IE下点击选中，并没有触发onchange事件，而需要再次失去焦点（点击页面的任何地方）的时候才可以触发onchange事件，而在Firefox下是点击选中checkbox既可以触发onchange事件的~
bug重现代码
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>IE onchange event bug</title></head>
<body>
<input type="checkbox" value="1" onchange="alert(this.value);" id="demo1"/>
<label for="demo1">demo1</label>
<input type="checkbox" value="2" onchange="alert(this.value);" id="demo2"/>
<label for="demo2">demo2</label>
</body></html>
解决方法
- 在jQuery1.4.2中绑定change事件是完全可以解决的，而在jQuery1.3.2中绑定change事件是不行的，我们可以通过click事件来绑定
- 如果不怕麻烦也不介意绑定两次事件，可以使用IE自带的onpropertychange事件绑定change事件，断桥残雪测试是可以的，不过这样子在IE下就绑定了两次change事件，不推荐这个方法，如果是checkbox，radio等还是使用click事件来处理吧
之前写过一篇《7个JavaScript在IE和Firefox浏览器下的差异写法》，今天断桥残雪再来总结一部分IE和Firefox的javascript差异写法：
window.event对象差异
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)
获取鼠标当前坐标
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。
鼠标当前坐标(加上滚动条滚过的距离)
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。
标签的x和y的坐标位置：style.posLeft 和 style.posTop
IE：有。
FF：没有。
通用：object.offsetLeft 和 object.offsetTop。
继续阅读全文……
之前一直使用IE Developer Toolsbar跟IEtester作为IE的兼容性调试工具，IETester主要用于CSS的调试，而IE Developer Toolsbar用户体验可谓不是一般的糟糕，加上IE Developer Toolsbar经常使自己正常的JS代码变得不正常，所以在IE下兼容性调试的工具没有什么好用的。
今天介绍这款SuperPreview for IE则是微软出品的免费IE兼容性调性工具，需要.NET Framework 3.5库支持。
1、安装截图：
SuperPreview for IE安装截图
继续阅读全文……
