- 浏览: 194533 次
- 性别:
- 来自: QD
文章分类
- 全部博客 (127)
- Struts2 (8)
- Web (27)
- 计算机基础 (2)
- 面试 (2)
- JQuery (4)
- MySQL (1)
- SQL (1)
- AJAX (3)
- Java (17)
- Javascript (36)
- 情感 (0)
- Oracle (7)
- Spring (5)
- FreeMarker (2)
- JSON (1)
- 表达式 (1)
- 线程 (4)
- WebService (10)
- MyEclipse (2)
- LDAP (1)
- Tomcat (1)
- NIO (1)
- Linux (1)
- ExtJS (4)
- Android (1)
- Dojo (2)
- Maven (9)
- Ant (7)
- 分布式 (1)
- Intellij IDEA (1)
最新评论
-
northc:
米饭军 写道如果文件已存在怎样避免应该会覆盖的
用Ant scp往远程linux传文件 -
米饭军:
如果文件已存在怎样避免
用Ant scp往远程linux传文件 -
luis025:
不支持列隐藏 硬伤
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1) -
rgbhje:
楼主大神,我把你的代码简单改了一小下,在4.2可以跑了
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1) -
rgbhje:
楼主大神,我把你的代码简单改了一小下,在4.2可以跑了
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)
浏览器市场的百花争艳既打破了IE一家独霸的垄断局面也给网页开发者带来不小的麻烦,IE、FireFox、Opera、Safari……还有新秀Chrome...昨日黄花Netscape...Oh My God!究竟哪款浏览器可以完美展现我的网页效果?我那制作精美的网页在哪款浏览器上又糟糕的一塌糊涂?本文仅关注占浏览器市场份额绝大部分的IE与FireFox对网页开发中的兼容性问题,文中所涉及经验部分为笔者在实际开发中总结、另有较多信息从大量互联网资料中整理所得,并未一一测试验证。本文作为教程还远远不够,权且当作经验总结以供大家参考。 一、 JS与DOM的兼容性: (一) DOM节点的访问: 1. 以前对DOM节点访问一般用“document.All.元素ID属性值”或者“document.元素ID属性值”这种简化的方法,在FireFox中有时不支持此方法。 解决办法:标准的方法为“document.getElementById(‘元素ID属性值’)”或者“document.getElementByName(‘元素Name属性值’)[0]”或者“document.getElementByTagName(‘元素标签名’)[0]”; 2. 集合类对象的()与[]的问题:以前的代码中很多集合类对象的访问使用(),IE可以正常解析,FireFox不支持。 解决办法:改用[]作为下标符号。如:document.Forms(‘FormName’)改为document.Forms[‘FormName’];又如:document.getElementsByName(‘元素Name属性值’)(1)改为document.getElementsByName(‘元素Name属性值’)[1]; 3. document.Form.Item的问题:FireFox不能正常解析形如:document.FormName.Item("ItemName")这样的语句,但IE与FireFox都支持document.FormName.Elements["ElementName"]。 解决办法:改用如下语句形式:document.FormName.Elements["ElementName"]; 4. 在IE中,可以利用eval(‘元素ID属性值’)的方法取得改HTML对象,FireFox不支持此种对象访问方法。 解决办法:用“document.getElementById(‘元素ID属性值’)”的方法取得对象; 5. 在IE中可以通过ID属性值或者Name属性访问这个Frame对象,而FireFox只可以通过Name属性来访问这个Frame对象; IE和FireFox均可通过window.document. getElementById(‘FrameId属性值’)来访问这个Frame对象 6. 在IE中body对象要在<body>标签完全读入才会存在,而在FireFox中一开始就存在 7. 在IE中input标签的type属性是只读的,但在FireFox中是可读写的 8. 在IE中getElementsByName()、document.all[name]均不能用来取得div元素 9. IE,FireFox以及其它浏览器对于Table标签的操作都各不相同,在IE中不允许对Table和TR的innerHTML赋值,使用JS增加一个TR时,使用appendChild方法也不管用。 解决办法: //向Table追加一个空行: 10. 在FireFox节点中没有removeNode方法,必须使用如下方法node.parentNode.removeChild(node) 11. IE或者FireFox2.0.x下,可以使用window.location或window.location.href;但在FireFox1.5下,只能使用window.location 解决方法:使用window.location来代替window.location.href 12. IE与FireFox的访问父元素有区别,IE为Obj.ParentElement属性;FireFox为Obj.ParentNode属性 解决办法:因为FireFox与IE都支持DOM,因此统一用ParentNode属性 13. FireFox不支持元素的innerText属性,需用textContent 解决办法: if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById('element').innerText = "my text"; } else{ document.getElementById('element').textContent = "my text"; } 14. FireFox不支持元素的HtmlText属性 解决办法: rng = document.createRange(); el = document.getElementById(ElementId); rng.setStartBefore(el); htmlFrag = rng.createContextualFragment(content); while (el.hasChildNodes()){ //清除原有内容,加入新内容 el.RemoveChild(el.LastChild); } el.AppendChild(htmlFrag); 15. 在IE下可以用<Img Id="pic" OnClick="this.src= ‘aa.php’" src="aa.php" style="cursor: pointer"/> 可以刷新图片,但在FireFox下由于缓存问题不行。 解决办法: 在地址后面加个随机数:编辑onclick事件代码如下:"this.src=this.src+’?’+Math.random()" 16. 在访问某一节点如childNodes[i]时,要获得该节点的值而这个值是<![CDATA[]]类型,那么在IE中可支持这样访问childNodes[i].text或childNodes[i].firstChild.nodeValue;在FireFox只支持childNodes[i].firstChild.nodeValue 解决办法:统一用childNodes[i].firstChild.nodeValue方法访问节点元素值 17. 在形如 <root> 格式的XML,在IE中<en>是<root>的第一个子节点,可通过root.childNodes[0]或root.firstChild访问,但在FireFox中<en>是<root>的第二个子节点,第一个子元素是换行符,NodeType是#text;如果将XML换成如下格式 <root><en>text</en></root> 在IE和FireFox中<en>都是<root>的第一个子节点 18. 在用JS创建单选按钮上的方法上,IE与其它浏览器不同,要写出通用的创建方法就需要一种浏览器嗅探机制(browser-sniffing);IE是唯一能够识别uniqueID这一document对象专属属性的浏览器,故可用该属性区分浏览器类型;代码如下: if(document.uniqueID){ //Internet Explorer var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>"); }else{ //Standards Compliant var readioButtion = document.createElement("input"); readioButtion.setAttribute("type","radio"); readioButtion.setAttribute("name","radioButtion"); readioButtion.setAttribute("value","checked"); } 19. 删除select列表标签的列表项应该用obj.remove(i);而不是用obj.options.remove(i); 20. 添加select列表标签的列表项应该用 var oOption = document.createElement('option'); oOption.text = text; oOption.value = value; targetArea.options[targetArea.options.length]= oOption; //new Option(text,value); 而不是用 var oOption = document.createElement('option'); oOption.text = text; oOption.value = value; targetArea.options.add(oOption); 21. IE中一般这样初始化一个XMLDOM对象 var xmlDom = new ActiveXObject("Microsoft.XMLDOM"); FireFox不支持该方法(具体原因参见四.JS的语法兼容性.6.),兼容性代码如下 if (window.ActiveXObject){ var xmlDom = new ActiveXObject("Microsoft.XMLDOM"); }else{ if (document.implementation && document.implementation.createDocument){ var xmlDom = document.implementation.createDocument("","",null); } } 有关不同浏览器对XMLDOM操作的异同请参见《IE和FireFox浏览器读取XML方法比较》 (二) DOM节点属性的访问: 1. 原来在IE中设置HTML对象属性的方法如:document.all.apple.width=100或者apple.width=100;现在为了能够和FireFox兼容,对象属性的设置写为:document.getElementById(‘元素ID属性值’).setAttribute(‘width’, ‘100’) 对象属性的获取写为: document.getElementById(‘元素ID属性值’).getAttribute(‘width’) 2. (接上条) 在IE下不能正确使用setAttribute来设置对象的style、class以及事件响应属性, 因此还得按原来的方法来访问和设置,以达到兼容各种浏览器的效果 如下例: document.getElementById(‘元素ID属性值’).class document.getElementById(‘元素ID属性值’).style.color document.getElementById(‘元素ID属性值’).onclick document.getElementById(‘元素ID属性值’).class="classname" document.getElementById(‘元素ID属性值’).style.color="colorname" document.getElementById(‘元素ID属性值’).onclick= function(){alert(‘函数内容’)} 3. 在FireFox中,自己定义的属性必须用getAttribute()方法获取,不能像在IE下直接获取 解决办法:统一用getAttribute()方法获取 4. img标签具有title和alt两个属性,title用作图片的tip说明,alt用在图片不存在或加载失败时的提示;在IE中若未定义title则alt也承担了title的作用,但在FireFox则各司其职;因此为保证浏览器兼容最好各尽其用 5. IE中要操作某个节点(Node)的class要用”classname”做为属性名来设置或取得,FireFox和其它浏览器用”class”做为属性名来设置或取得 6. 设置某个节点(Node)的style,如果用”style” 做为属性名其它浏览器都能解析,但IE会忽略;如果用”cssText” 做为属性名其它浏览器都能解析,但Opera会忽略;通用代码如下: var oStyle = oNode.getAttribute("style"); if(oStyle == "[object]"){ oStyle.setAttribute("cssText", strStyle); oNode.setAttribute("style", oStyle); }else{ oNode.setAttribute("style", strStyle); } (三) DOM事件(event)的使用: 1. IE下一般用document.body.onload = onload_func这样的方法注册onload响应事件函数,其中function onload_func()在这之前已经被实现,但是在FireFox下却无法执行; FireFox下一般用document.body.onload = onload_func()这样的方法。 解决办法:都采用window.onload = onload_func这种方法;或者都采用document.body.onload = new Function('onload_func'); 或者都采用document.body.onload = function(){/* … … */}。(注意Function与function的区别) 2. FireFox的event只能在事件发生的现场使用,此问题暂无法解决。可以这样变通: 原代码(可在IE中运行): <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/> ... <script language="javascript"> function gotoSubmit(){ ... alert(window.event); // use window.event ... } </script> 新代码(可在IE和FireFox中运行): 此外,如果新代码中第一行不改,与原代码相同的话(即gotoSubmit调用没有给参数),则仍然只能在IE中运行,但不会报错。 3. 在IE中,event对象有x、y两属性,FireFox中没有;相对的在FireFox中,event对象有pageX、pageY两属性,IE中没有。 解决办法:用event.clientX、event.clientY代替,缺陷是在页面中存在滚动条时与pageX、pageY有细微差别;或者用如下方法代替: pgX = event.x ? event.x : event.pageX; pgY = event.y ? event.y : event.pageY; 可取得无差别数值。 4. 在IE中event对象有srcElement属性,但是没有target属性; 在Firefox中event对象有target属性,但是没有srcElement属性 解决办法:用obj = event.srcElement ? event.srcElement : event.target;来代替IE下的event.srcElement或者Firefox下的event.target,请同时注意event的兼容性问题。 5. 添加事件捕获 IE中:obj.setCapture()、obj.releaseCapture() FireFox中:document.addEventListener( "mousemover",mousemovefunction,true); document.removeEventListener( "mousemove ",mousemovefunction,true); 6. 禁止选取网页内容 IE中用JS:obj.OnSelectStart=function(){return false;} FireFox中用CSS:-moz-user-select:none (四) JS的语法兼容性: 1. 在FireFox中可以使用与HTML节点对象ID属性值相同的JS变量名称,但是IE中不行。 解决办法:在命名上区分HTML节点对象ID属性值和JS变量 2. IE不支持JS的const,无法定义JS常量 解决办法:全部用var定义为变量 3. 在JS中书写URL地址字符串时&字符就直接写为“&”(去掉双引号),不要写“&”,否则容易出现URL识别不正常的错误 4. 在IE中可以通过showModalDialog和showModelessDialog打开模式和非模式窗口,FireFox下则不能 解决办法:使用Window.Open方法。 如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用Window.Opener属性来访问父窗口;如果需要父窗口控制子窗口的话,使用Var subWindow = Window.Open(pageURL,Name,Parameters); 来获得新开的窗口对象 5. 在IE中向表格里添加一行的方法insertRow()如果不指定参数,默认参数为-1,将自动向Table中追加1行;在FireFox中一定要指定参数如-1,参数为空会报错 6. 在IE中可以使用new ActiveXObject()的方法实例化对象,如var xmlDom = new ActiveXObject("Microsoft.XMLHTTP");但是FireFox不支持ActiveXObject,只能通过这种方法如var xmlDom = new XMLHttpRequest();实例化对象
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
<en>text</en>
</root>
document.getElementsByTagName(‘元素标签名’)[0].setAttribute(‘width’, ‘100’)
document.getElementsByTagName(‘元素标签名’)[0].getAttribute(‘width’)
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>
发表评论
-
Ext Toolbar换行
2012-06-21 09:02 01.var oneTbar=new Ext.Toolba ... -
禁止select控件選擇
2012-06-20 20:06 0禁止select控件選擇 大家知道, 對於HTML控件 ... -
几种压缩算法原理介绍
2012-05-25 20:04 1369先给出一个JS实现的ZIP:http://stuartk ... -
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)
2012-03-12 17:00 10908需要将ExtJS Grid 导出 Excel 的同学可以试一试 ... -
Ext Js 4.x 扩展自己的XType
2012-03-03 14:26 1565如果想用自己定制的XType(比如这里想用一个Obj存 ... -
(转)Javascript中大括号“{}”的多义性
2012-02-25 11:21 1015JS中大括号有四种语义作用语义1,组织复合语句,这是最常 ... -
function sleep
2012-02-17 19:16 890//毫秒 (function sleep(t){ ... -
不用递归,循环算0-9999之和(js)
2012-02-17 19:15 898var i=0,sum=eval(new Arra ... -
Augment.js 为旧浏览器增加现代Javascript的功能支持
2012-01-18 12:06 1085index: http://olivernn. ... -
Javascript中的~和~~
2011-12-30 15:58 886<script type="text/j ... -
js中的onchange和onpropertychange
2011-12-28 11:26 1851当一个HTML元素的属 ... -
parentNode、parentElement,childNodes、children
2011-12-26 17:38 936parentNode、parentElement,childN ... -
关于JS中的constructor与prototype
2011-12-22 19:53 1015我们都知道,在JS中有一个function的东西。一般人 ... -
各浏览器对document.getElementById等方法的实现差异
2011-12-21 13:15 935本文来自:http://www.cnblogs.com/sna ... -
全世界最短的IE判定
2011-12-20 15:45 808var ie = !-[1,]; ... -
document.getElementsByClassName的理想实现
2011-12-20 14:41 1446来自: 司徒正美 blog http://www.cnblo ... -
浏览器支持的JS版本及JS对象图
2011-12-20 10:38 1091来自zh.wikipedia.org的JavaScript ... -
JS判断浏览器能力
2011-12-15 20:47 1059对象/特征检测法 该方法是一种判断浏览器能力(而非浏览器 ... -
onunload和onbeforeunload区别
2011-12-15 18:54 981Onunload,onbeforeunload都是在刷 ... -
收藏的两个多tab切换
2011-12-13 19:02 957留着可能以后有用
相关推荐
浏览器兼容性问题一直是Web开发中的一个关键挑战,尤其是在构建跨平台、多设备的网页时。黄昊在WebRebuild北京第一届交流会上所分享的《浏览器兼容性问题简介》揭示了这些问题的核心及其解决策略。 首先,浏览器...
【图片浏览器——JS】是一种基于JavaScript技术实现的用于展示和浏览图片的应用程序。在网页设计中,图片浏览器常被用来创建交互式的图片展示效果,如幻灯片展示、图片轮播等,为用户提供友好的浏览体验。在这个项目...
由于JavaScript在不同的浏览器中可能存在差异,因此实现一个兼容多浏览器的万年历功能需要考虑浏览器的兼容性问题,确保在IE、Chrome、Firefox、Safari等主流浏览器上都能正常运行。 万年历的设计通常包括以下几个...
对于多浏览器兼容性,开发者通常需要处理以下挑战: 1. **CSS样式兼容**:不同的浏览器可能对CSS样式的支持程度不同,例如,IE8及更早版本对一些现代CSS属性不支持。开发者需要使用像`autoprefixer`这样的工具来...
然而,这也带来了新的挑战——不同的浏览器对同一网页的呈现可能产生差异,这就是所谓的“浏览器兼容性问题”。 #### 二、浏览器兼容性问题分类 浏览器兼容性问题大致可归类为三类: 1. **渲染相关**:涉及样式和...
总的来说,JsCalendar作为一个JavaScript日历插件,涉及到的知识点包括JavaScript基础、DOM操作、CSS自定义、事件处理、日历逻辑、API接口、浏览器兼容性、插件集成以及性能优化。理解并掌握这些内容,将使你在使用...
例如,jQuery提供了一套更易用的API来处理DOM操作,简化了跨浏览器兼容性问题。 级联.html文件可能包含了一个关于级联下拉菜单的示例,这在网页表单中非常常见。在JavaScript中,可以通过DOM操作来实现这样的功能,...
"网页模板——JS处理货币格式浮点数插件currency.js.zip" 提供了一个JavaScript解决方案,帮助开发者轻松地格式化货币数值。这个插件名为"currency.js",其主要目标是将不规则的浮点数转换为符合货币格式的字符串。 ...
使用这些工具,开发者可以更高效地进行网页布局调整,修复样式问题,追踪JavaScript错误,以及验证浏览器兼容性。对于学习和理解DOM工作原理,以及提升网页开发技能来说,它们都是非常宝贵的资源。 总结一下,"两个...
例如,对于某些中文网页显示乱码的问题,文章建议采用中文国际化策略来解决字符编码兼容性问题。另外,考虑到DOM树的查询遍历效率较低,文章推荐在源码中使用XPath技术来提高查询速度。这些改进措施不仅有助于提升...
JavaScript还涉及浏览器兼容性问题,因为不同的浏览器可能对某些API或特性有不同的实现。读者将了解到如何使用条件注释、特性检测和库(如jQuery)来解决这些问题。 最后,随着Web技术的发展,JavaScript已经不仅仅...
总结来说,“jquery-browser.js”是jQuery的一个扩展插件,它提供了一个简单的方法来获取浏览器信息,有助于解决浏览器兼容性问题。虽然在现代Web开发中,我们鼓励使用特性检测代替浏览器检测,但在某些场景下,它...
- **兼容性问题**:在开发过程中还需要考虑到不同浏览器间的兼容性问题,确保网页能在各种环境中正常显示。 综上所述,这份资料不仅提供了丰富的HTML+CSS+JavaScript+Bootstrap的实践案例,还涵盖了网页设计的基本...
此外,书中还会涉及性能优化和跨浏览器兼容性问题,这是每个前端开发者都必须面对的挑战。讲解如何编写高性能的JavaScript代码,避免内存泄漏,以及如何确保代码在不同浏览器中保持一致的行为。 对于那些寻求提升...
"网页模板——javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可)" 提供了一种解决方案,通过JavaScript技术来优化网页中的选择元素,如单选按钮、复选框以及传统的下拉框,尤其是强调了树形...
8. **兼容性问题**:由于浏览器之间的差异,DOM的实现并不完全一致。书中的实践部分会介绍如何处理这些兼容性问题,确保代码能在不同环境下正常工作。 通过学习《JavaScript DOM编程艺术》,读者不仅可以掌握DOM的...
2. **babel.min.js**: Babel是一个广泛使用的JavaScript编译器,它的主要任务是将使用ES6+(包括JSX)语法的代码转换为兼容当前浏览器的ES5语法。这是因为许多老版本的浏览器不支持新的JavaScript特性,如类...
5. **浏览器兼容性**:不同的浏览器对HTML、CSS和JavaScript的解析可能存在差异,可能导致在某个浏览器上运行正常,但在另一个浏览器上出现问题。需要进行跨浏览器测试以确保兼容性。 6. **异常处理**:在编写测试...
3. **利用库和框架**:许多现代JavaScript库(如jQuery)已经解决了大部分浏览器兼容性问题,使用这些库可以帮助开发者更轻松地处理DOM操作。 4. **保持代码简洁**:避免使用过于复杂的DOM操作,尽量保持代码简洁...
5. 应用CSS样式,包括定位、尺寸、透明度等,可能还需要考虑浏览器兼容性问题。 6. 当鼠标离开触发元素时,通过`mouseout`事件隐藏提示框。 此外,如果结合Ajax使用,可以实现动态加载提示内容,比如从服务器获取...