- 浏览: 593159 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (199)
- 纯java (22)
- 中间件 (1)
- java线程 (1)
- webwork (10)
- HTML/CSS (11)
- struts2 (10)
- mysql (14)
- Linux (8)
- 字符编码和转换 (1)
- WebService (1)
- web (21)
- javascript (33)
- ajax (5)
- 随便写写 (3)
- svn (0)
- eclipse使用技巧 (10)
- Ant (1)
- 互联网发展方向 (1)
- Jquery (12)
- 视频 (2)
- MD5 (1)
- 项目经验总结 (1)
- Oracle (2)
- Netbeans (1)
- Apache/Tomcat (4)
- springside (1)
- hibernate (6)
- SpringSecurity (0)
- java与文件 (1)
- CKEditor (4)
- JSON (3)
- 笔试题 (0)
- 应用部署 (1)
- 杂七杂八 (1)
- android (1)
- jQuery UI (1)
- XML相关技术 (1)
- HTML5 (1)
- CSS3 (0)
- 正则表达式 (1)
- http协议 (3)
- 算法 (5)
- 互联网知识 (1)
最新评论
-
hp321:
我现在遇到一个开发自定义按钮的问题,想请教下你:问题如下:举例 ...
Ckeditor 如何在源码模式下添加可以显现的按钮 -
make1828:
javascript跨域解决方案(一) -
huxianwen:
问题是, ckeditor编辑器在源码模式并不能插入任何代码呀 ...
Ckeditor 如何在源码模式下添加可以显现的按钮 -
nidonglin1986:
虽然解决了问题,但是原因说的不是很明白啊。中文跟HTML标志 ...
struts2的标签在JS中的使用 中文乱码 -
ldw1986hf123:
[*]
JVM工作原理
做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同。这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码。就会造来客户的投诉,如果让BoSS知道了,这可不太好哦。下面是兼容IE和FF的js脚本做法和分解(部分选自网上):
.以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox
//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。
//event.srcElement问题
说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题。
//event.toElement问题
问题:
IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性
解决方法:
var target = e.relatedTarget || e.toElement;
//标签的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", function);。
FF:element.addEventListener("click", function, true)。
通 用:element.onclick=function。虽然都可以使用onclick事件,但是onclick和上面两种方法的效果是不一样的,onclick 只有执行一个过程,而attachEvent和addEventListener执行的是一个过程列表,也就是多个过程。例如:element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。
//标签的自定义属性
IE:如果给标签div1定义了一个属性value,可以div1.value和div1["value"]取得该值。
FF:不能用div1.value和div1["value"]取。
通用:div1.getAttribute("value")。
//document.form.item 问题
IE:现有问题:现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行
FF/IE: document.formName.elements["elementName"]
//集合/数组类对象问题
(1)现有问题:
现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能。
(2)解决方法:
改用 [] 作为下标运算。如:document.forms("formName") 改为 document.forms["formName"]。
又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
//HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用
//用idName字符串取得对象的问题
(1)现有问题
在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。
//变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
(2)解决方法
在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
//document.getElementsByName() 和 document.all[name] 的问题
现有问题:在 IE 中,getElementsByName()、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取的元素还不知道)。
//document.all
Firefox可以兼容document.all, 但会生成一条警告。可以用getElementById("*") 或者 getElementByTagName("*")来代替
不过对于document.all.length等属性,则完全不兼容
//input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写
//window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location
解决方法:使用window.location来代替window.location.href
//模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
//frame问题
以下面的frame为例:
<frame src="xxx.html" mce_src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
FF:只能使用window.frameName来访问这个frame对象.
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame),可以在frme中使用parent来访问父窗口。例如:window.parent.document.form1.filename.value="Aqing";
//body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在
//事件委托方法
IE:document.body.onload = inject; //Function inject()在这之前已被实现
FF:document.body.onload = inject();
//firefox与IE的父元素(parentElement)的区别
IE:obj.parentElement
FF:obj.parentNode
解决方法: 因为FF与IE都支持DOM,因此使用obj.parentNode是不错选择
//innerText在IE中能正常工作,但是innerText在FireFox中却不行. 需用textContent
//FireFox中设置HTML标签的style时,所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的
//父节点、子节点和删除节点
IE:parentElement、parement.children,element.romoveNode(true)。
FF:parentNode、parentNode.childNodes,node.parentNode.removeChild(node)。
//对select的options集合操作
枚举元素除了[]外,SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。
注意在add后赋值元素,否则会失败
动态删除select中的所有options:
document.getElementById("ddlResourceType").options.length=0;
动态删除select中的某一项option:
document.getElementById("ddlResourceType").options.remove(indx);
动态添加select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
IE FF 动态删除通用方法:
document.getElementById("ddlResourceType").options[indx] = null;
//捕获事件
问题:
FF没有setCapture()、releaseCapture()方法
解决方法:
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//禁止选取网页内容
问题:
FF需要用CSS禁止,IE用JS禁止
解决方法:
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;
//画图
IE:VML。
FF:SVG。
//CSS:透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
//CSS:圆角
IE:不支持圆角。
FF:-moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。
//CSS:双线凹凸边框
IE:border:2px outset;。
FF:-moz- border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。
发表评论
-
Javascript的分层概念
2011-12-07 17:27 1272Javascript如何分层: 我们把 ... -
一道诡异的js面试题
2011-11-09 17:46 1907请给出如下两段程序的执行结果: 第一种情况: <sc ... -
JavaScript在IE和Firefox下的兼容性问题
2011-11-09 16:45 1718(一) 问题1:获取一个元素对象的引用,在IE下,可直接使用该 ... -
Jquery性能优化
2011-11-08 15:47 1052之前,我们减少字节数 ... -
雅虎网页优化14条准则
2011-11-04 15:27 1480网站最基本的东西是什么? ——内容?SEO(搜索引擎优化)?U ... -
对String对象进行扩展,使其具有去掉字符串前后空格的方法
2011-11-02 11:27 1842通过正则表达式可以实现题目要求具体代码如下: <htm ... -
前端开发性能优化规范
2011-11-01 11:00 1网站性能优化是一个很综合的话题,涉及到服务器的配置和网站前后端 ... -
javascript跨域解决方案(二)
2011-10-28 16:45 15323.4、iframe+location.hash 这种方法比 ... -
javascript跨域解决方案(一)
2011-10-28 16:42 107411、神马是跨域(Cross Domain) 说白点就是p ... -
如何确保页面中的js加载完全
2011-10-28 11:19 1522如何确定一个js是否加载完全或者页面中的所有js加载完全,具体 ... -
javascript性能优化准则
2011-10-28 10:54 14javascript性能优化准则: 1.将脚本放在底部 2 ... -
js字符串连接性能问题
2011-10-27 21:00 1104大多数情况下,加法运算符是首选;如果用户主要使用IE ... -
javascript闭包概念的理解
2011-10-27 09:17 13131.什么是闭包? 闭包,就是封闭了外部函数作用域中 ... -
点击页面标签弹出 标签名字的两种方式
2011-10-26 15:36 1284第一种解决办法是jquery的方式: <script ... -
js中innerHTML、outHTML和innerText的用法与区别
2011-10-19 16:15 6088js中innerHTML与innerText的用法与区别 用法 ... -
javascript异步加载方案
2011-08-02 09:56 5397javascript延迟加载的解决方案: 1.使用defer ... -
Js中的undefined,null,NaN,Bool以及类型判断
2011-07-21 19:35 41931.类型分析: jav ... -
js单引号中嵌套单引号的问题的正确写法
2011-06-16 11:25 3120例如我们要写如下一段代码: this.div.InnerHT ... -
不唐突的JavaScript的七条准则
2011-04-25 11:03 1052经过多年的开发、教学和编写不唐突的JavaScript, 我发 ... -
javascript数组定义
2011-04-21 13:56 1127数组有四种定义的方式 使用构造函数: var a = new ...
相关推荐
以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox //window.event IE:有window.event对象 FF:没有window.event对象。可以通过给函数的参数传递event对象。\u5982onmousemove=
IE与FF的兼容问题 IE浏览器和火狐浏览器兼容问题——CSS篇 IE浏览器和Firefox(火狐)浏览器兼容性——Javascript篇
本文是软件开发网小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧! 1. children与childNodes IE提供的children、childNodes和firefox下...
今天测试代码时,发现不少IE可以运行的ajax,但在FF中报错。IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下,需要的朋友可以看下,对于以后的代码书写一定要考虑到多浏览器的兼容性。
以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox //window.event IE:有window.event对象 FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)...
为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 代码如下:一、函数和方法差异;二、样式访问和设置;三、DOM方法及对象引用;四、事件处理;五、其他差异的兼容处理。 一、函数和方法差异 1. ...
javascript实现ctrl+enter键提交表单并且兼容ie和ff以及google浏览器(Chrome)、苹果浏览器(Safari)、360极速浏览器(ie和火狐)
在不同浏览器中对于一些属性的支持也不一样,下面是对ie和firefox的一些小结。
第一排给Firefox以及其他浏览器看 第二排给IE7(可能以后的IE8、IE9也是如此,谁知道呢)看 第三排给IE6以及更老的版本看 最好的应用就是可以让IE6也“支持”position:fixed,而且,配合这个原理,可以做到不引入...
它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX...
javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦, 常常一个页面在IE7,Firefox下运行正常, 在IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有了jQuery我们将从这个噩梦...
方法一: 用的浏览器内部转换器实现转换,要领是动态创建一个容器标签元素,如DIV,将要转换的字符串设置为这个元素的innerText(ie支持)||textContent(火狐支持),然后返回这个元素的innerHTML,即得到经过HTML编码...
兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera ver 4.0.4 (2011-12-11) 新增: 阿拉伯语语言包。 改善: 上传文件时显示上传中提示。 改善: JSON解析失败时,通过弹出层显示服务器返回...
支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...
支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...
//document.writeln ('<dd>06月21日 修复IE6下兼容问题</dd>'); //document.writeln ('<dd>06月01日 懒人图库2012新版上线</dd>'); //document.writeln ('<dd>05月26日 新增北方网通服务器</dd>'); //document....
8、系统浏览器兼容性调整完毕,现在您可以在IE、firefox和遨游、腾讯TT等浏览器上正常使用本程序了 [2009-5-10] v3.1 beta1 1、部分功能ajax化 2、验证机制cookies化 3、界面UI更换 [2009-1-7] v 3.0 PACK3 ...