三水清IE

再谈Iframe的问题

三水清 — Wed, 10 Nov 2010 03:58:18 +0000

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跨域问题

如果遇见了iframe跨子域的问题，可以尝试在父窗口和子窗口添加document.domain="js8.in"来解决。

iframe DOM操作问题

iframe的DOM操作，我在《使用JavaScript在IE和Firefox下进行iframe的DOM操作》中已经讲解的比较详细，并且有详细的演示，在子窗口B操作子窗口A的时候，我使用的是通过子窗口B操作父窗口来间接操作子窗口A，也就是说通过parent来选择子窗口A然后再对其进行操作。不要使用子窗口B来创建一个DOM对象然后插入到父窗口。因为这样的操作会在IE下出错！例如下面的例子：
子窗口中的js代码：

var div = document.createElement('div');
div.id="fuckIE6";
div.innerHTML="fuckIE6";
parent.document.getElementsByTagName('body')[0].appendChild(div);

上面的代码会在IE出现问题，所以正确的方法是：

var div = parent.document.createElement('div');
div.id="fuckIE6";
div.innerHTML="fuckIE6";
parent.document.getElementsByTagName('body')[0].appendChild(div);

也就是通过父窗口创建DIV标签，然后在插入到body之后。

声明：文章未声明为原创文章，本文链接 http://js8.in/638.html. 转载请注明转自 JS8.IN ™

随机文章

IE中flash遮挡div现象的解决方案

三水清 — Wed, 08 Sep 2010 09:58:05 +0000

今天开始给网站首页的广告管理系统添加flash广告代码，结果出现IE中（包括IE6+）弹窗广告要flash遮挡的问题，后来想到了常用的iframe方法（参见《解决IE6 select z-index无效，遮挡div的bug》），最终成功了flash遮挡DIV的bug，但是在IE中还出现了浮动的DIV变化位置后，flash出现div碎片的拖尾现象。继续寻找解决方案。最后终于找了原来flash有个参数wmode可以设置，于是代码变成了这样：

wmode=”Opaque” width=”150″ height=”240″>

于是IE中Flash遮挡DIV的问题成功解决了，看图：

flash遮挡div问题的解决方案

订阅更“健康”

声明：文章未声明为原创文章，本文链接 http://js8.in/622.html. 转载请注明转自 JS8.IN ™

随机文章

解决IE下setTimeout传参数的bug

三水清 — Sat, 28 Aug 2010 11:43:47 +0000

最近一次的开发中遇到了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：

 if(!+[1,]) { 
     (function(f){  
         window.setTimeout =f(window.setTimeout);  
         window.setInterval =f(window.setInterval);  
     })(function(f){  
         return function(c,t){  
             var a=[].slice.call(arguments,2);  
             return f(function(){  
                 c.apply(this,a)},t)  
             }  
     });  
 }

点击订阅断桥残雪部落格

声明：文章未声明为原创文章，本文链接 http://js8.in/593.html. 转载请注明转自 JS8.IN ™

随机文章

IE中多帧GIF可以触发多次Image().load事件

三水清 — Wed, 07 Jul 2010 04:47:59 +0000

昨天同事负责一个首页广告，广告采用的是多帧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';

声明：文章未声明为原创文章，本文链接 http://js8.in/569.html. 转载请注明转自 JS8.IN ™

随机文章

IE onchange事件触发bug？

三水清 — Tue, 25 May 2010 07:33:32 +0000

今天遇到了IE一个onchange事件的bug，此bug存在于IE所有的版本（6,7,8）不知道是不是bug，还是IE故意这样设计的？姑且不做评价，我们来看看IE onchange事件的重现过程：

给input等控件添加onchange事件，例如input的checkbox（radio等），在IE下点击选中，并没有触发onchange事件，而需要再次失去焦点（点击页面的任何地方）的时候才可以触发onchange事件，而在Firefox下是点击选中checkbox既可以触发onchange事件的~

bug重现代码



IE onchange event bug


demo1

demo2

解决方法

在jQuery1.4.2中绑定change事件是完全可以解决的，而在jQuery1.3.2中绑定change事件是不行的，我们可以通过click事件来绑定
如果不怕麻烦也不介意绑定两次事件，可以使用IE自带的onpropertychange事件绑定change事件，断桥残雪测试是可以的，不过这样子在IE下就绑定了两次change事件，不推荐这个方法，如果是checkbox，radio等还是使用click事件来处理吧

声明：文章未声明为原创文章，本文链接 http://js8.in/541.html. 转载请注明转自 JS8.IN ™

随机文章

Javascript在IE与Firefox下的差异写法总结

三水清 — Fri, 05 Feb 2010 03:48:56 +0000

之前写过一篇《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：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。

添加事件

IE：element.attachEvent(”onclick”, func);。
FF：element.addEventListener(”click”, func, true)。
通用：element.onclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如：element.attachEvent(”onclick”, func1);element.attachEvent(”onclick”, func2)这样func1和func2都会被执行。

在这里断桥残雪，曾经写过一个通用的添加删除绑定事件的函数，大家可以查看以下文章：《JavaScript跨浏览器的添加删除事件绑定函数》

标签的自定义属性

IE：如果给标签div1定义了一个属性value，可以div1.value和div1["value"]取得该值。
FF：不能用div1.value和div1["value"]取。
通用：div1.getAttribute(”value”)。

父节点、子节点和删除节点

IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。

clientX,pageX,offsetX,x,layerX,screenX,offsetLeft

screenX:鼠标在显示屏幕上的坐标。
clientX:鼠标在页面显示区域的坐标。
注：以上两个都是各浏览器通用的。以下为特有方法：

pageX:FF特有，鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位，IE没有直接替换的属性。
layerX:FF特有，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在border的左上角，而不是内容区域的左上角。
offsetX:IE特有，鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！这个属性比较好用，用来判断鼠标点在一个元素中的哪个位置很方便，FF没有直接替换的属性。
x：IE特有，跟layerX一个效果，可作为layerX的直接替换属性。
注：IE和FF的定位有个1px的差别，实际上，IE的定位从0开始，FF的定位从1开始，FF永远会比IE大1px，需要根据实际情况处理。

offsetLeft:这个属性不是事件对象的属性，而是DOM对象所有的，该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的，设置了position的父对象”中的位置，虽然话是这么说的，但是不同的浏览器效果不一样。

FF中严格按上述说明执行，但是在IE6/7中，这个属性返回该DOM对象在其直接父对象中的位置，但是IE8改正了这个问题，不过IE8又有了一个新问题，其他的浏览器都是从父对象的内容区域的左上角开始定位，IE8确是从父元素的border的左上角开始定位，由于测试环境为IETester中的IE8，不能排除是IETester的问题。

声明：文章未声明为原创文章，本文链接 http://js8.in/472.html. 转载请注明转自 JS8.IN ™

随机文章

微软官方发布IE调试工具：SuperPreview for IE

三水清 — Tue, 22 Dec 2009 05:06:58 +0000

之前一直使用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安装截图

2、界面截图：

SuperPreview for IE主界面截图

SuperPreview for IE操作界面截图

直接看特点:

界面漂亮
可调试IE6, IE7-IE8和IE8以及单独的图片
四种浏览模式: 上下两栏，左右两栏，覆盖模式和单栏模式
两种元素高亮模式: 盒高亮和灯光高亮。不知道这样说对不对，反正就是一个用线框住元素，一个把选中元素以外的背景变暗。
显示选中元素的高宽和坐标
支持多种浏览器分辨率切换
支持DOM树查看
其它还有一些类photoshop的小功能: 参考缩略图、标尺、参考线、缩放和抓手等。

缺点：

中看不中用
不能调试js
不能输入修改内容

总的来说，挺酷的。喜欢的朋友，安装吧。

SuperPreview for IE下载地址
 .NET Framework 3.5下载地址(需要这个库的支持)

声明：文章未声明为原创文章，本文链接 http://js8.in/401.html. 转载请注明转自 JS8.IN ™

猜你喜欢：
使用JavaScript在IE和Firefox下进行iframe的DOM操作	iframe自适用高度代码	用document.domain+iframe实现Ajax跨子域	关于Ajax在浏览器中产生前进后退的实现方法
无觅

猜你喜欢：
解决IE6不支持max-height的bug	最新版wBox 解决IE6 背景太小bug	IE中多帧GIF可以触发多次Image().load事件	IE6中a标签location.href失效解决方法
无觅

猜你喜欢：
解决IE6不支持max-height的bug	最新版wBox 解决IE6 背景太小bug	解决IE下setTimeout传参数的bug	IE6中a标签location.href失效解决方法
无觅

猜你喜欢：
Javascript在IE与Firefox下的差异写法总结	IE6下javascript不能隐藏select标签的bug	png在IE6下透明的几种方法	7个JavaScript在IE和Firefox浏览器下的差异写法
无觅

猜你喜欢：
IE6下javascript不能隐藏select标签的bug	IE onchange事件触发bug？	7个JavaScript在IE和Firefox浏览器下的差异写法	png在IE6下透明的几种方法
无觅

猜你喜欢：
解决IE6 select z-index无效，遮挡div的bug	IE onchange事件触发bug？	微软官方发布IE调试工具：SuperPreview for IE	解决IE6背景图片不缓存的BUG
无觅