- 浏览: 267380 次
- 性别:
- 来自: 天津
文章分类
最新评论
-
1260533105:
uncaught invalidstateerror:Fail ...
WebSocket -
sh747665463:
压力好大啊
【转】如果你不知道接下去学什么,就看这个
1. document.form.item 问题
(1)现有问题:
现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在Firefox(火狐)下运行
(2)解决方法:
改用 document.formName.elements["elementName"]
(3)其它
参见 2
2. 集合类对象问题
(1)现有问题:
现有代码中许多集合类对象取用时使用 (),IE 能接受,Firefox(火狐)不能。
(2)解决方法:
改用 [] 作为下标运算。如:document.forms("formName") 改为 document.forms["formName"]。
又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
(3)其它
3. window.event
(1)现有问题:
使用 window.event 无法在火狐浏览器上运行
(2)解决方法:
火狐 的 event 只能在事件发生的现场使用,此问题暂无法解决。可以这样变通:
原
代码(可在IE中运行): <br /><input type="button" name="someButton"
value="提交" onclick="javascript:gotoSubmit()"/><br />...<br
/><script language="javascript"><br />function
gotoSubmit() {<br />...<br />alert(window.event); // use
window.event<br />...<br />}<br /></script>
新
代码(可在IE和火狐中运行): <input type="button" name="someButton" value="提交"
onclick="javascript:gotoSubmit(event)"/><br />...<br
/><script language="javascript"><br />function
gotoSubmit(evt) {<br />evt = evt ? evt : (window.event ?
window.event : null);<br />...<br />alert(evt); // use
evt<br />...<br />}<br /></script>
此外,如果新代码中第一行不改,与老代码一样的话(即 gotoSubmit 调用没有给参数),则仍然只能在IE中运行,但不会出错。所以,这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在火狐中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用idName字符串取得对象的问题
(1)现有问题
在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在火狐中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。
6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 火狐 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE中能。
(2)解决方法
在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
(3)其它
参见 问题4
7. event.x 与 event.y 问题
(1)现有问题
在IE 中,event 对象有 x, y 属性,火狐中没有。
(2)解决方法
在火狐中,与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。
如果要完全一样,可以稍麻烦些:
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在IE与火狐中都有,具体意义有无差别尚未试验。
8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame,火狐中不行
(2)解决方法
在frame的使用方面火狐和ie的最主要的区别是:
如果在frame标签中书写了以下属性:
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而火狐只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问
ie: window.top.frameId或者window.top.frameName来访问这个window对象
火狐: 只能这样window.top.frameName来访问这个window对象
另外,在火狐和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改
9. 在火狐中,自己定义的属性必须getAttribute()取得
10.在火狐中没有 parentElement parement.children 而用
parentNode parentNode.childNodes
childNodes的下标的含义在IE和火狐中不同,火狐使用DOM规范,childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时,IE和火狐对parentNode的解释不同,例如
<form>
<table>
<input/>
</table>
</form>
火狐中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
火狐中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)
11.const 问题
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:
不使用 const ,以 var 代替。
12. body 对象
火狐的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在
13. url encoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外,因为tpl中符合xml规范,要求&书写为&
一般火狐无法识别js中的&
14. nodeName 和 tagName 问题
(1)现有问题:
在火狐中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值。在 IE 中,nodeName 的使用好象
有问题(具体情况没有测试,但我的IE已经死了好几次)。
(2)解决方法:
使用 tagName,但应检测其是否为空。
15. 元素属性
IE下 input.type属性为只读,但是火狐下可以修改
16. document.getElementsByName() 和 document.all[name] 的问题
(1)现有问题:
在 IE 中,getElementsByName()、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取的元素还不知道)。
摘:http://firefox.sun-sky.com.cn/post/javascript.html
1.兼容firefox的 outerHTML,FF中没有outerHtml的方法。
if (window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});
HTMLElement.prototype.__defineGetter__("outerHTML",function() {
var attr;
var attrs=this.attributes;
var str="<"+this.tagName.toLowerCase();
for (var i=0;i<attrs.length;i++) {
attr=attrs[i];
if(attr.specified)
str+=" "+attr.name+'="'+attr.value+'"';
}
if(!this.canHaveChildren)
return str+">";
return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
switch(this.tagName.toLowerCase()) {
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
}
3.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
4.eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
5.变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
6.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法:
IE:
<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/>
...
<script language="javascript">
function gotoSubmit8_1() {
...
alert(window.event); //use window.event
...
}
</script>
IE&Firefox:
<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/>
...
<script language="javascript">
function gotoSubmit8_2(evt) {
...
evt=evt?evt:(window.event?window.event:null);
alert(evt); //use evt
...
}
</script>
9.event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
10.event.srcElement问题
说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
11.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
12.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如
果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如:var parWin =
window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.frame问题
以下面的frame为例:
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用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中的参数传回父窗口,可以在frme中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如:
Firefox:
<body >
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox:
<body >
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>
15. 事件委托方法
IE:document.body.onload = inject; //Function inject()在这之前已被实现
Firefox:document.body.onload = inject();
有人说标准是:
document.body.onload=new Function('inject()');
16. firefox与IE(parentElement)的父元素的区别
IE:obj.parentElement
firefox:obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
17.cursor:hand VS cursor:pointer
firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer
18.innerText在IE中能正常工作,但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
19. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法:
obj.style.height = imgObj.height + 'px';
20. IE,firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChile方法也不管用。
解决方法:
//向table追加一个空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效
23. CSS透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
24. 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;。
25. 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;
发表评论
-
js屏蔽f5 兼容ie和firefox
2011-09-02 15:36 1104var check=function(e){ e=e||wi ... -
js后退
2011-07-01 14:44 716<pre> <input type=b ... -
js window 常用
2011-06-17 21:13 11486Window对象是DOM对象模型 ... -
jquery对象与dom对象
2011-05-31 15:02 687什么是jQuery对象? ---就是通过jQu ... -
js 键盘事件
2011-05-20 13:07 1296<script> funct ... -
jquery ajax json4 treeview动态加载
2011-04-29 10:32 1706<ul id="tree" c ... -
HTML字符实体(Character Entities),转义字符串(Escape Sequence)
2011-04-28 10:21 1156HTML字符实体(Character Entities),转义 ... -
HTML字符实体(Character Entities),转义字符串(Escape Sequence)
2011-04-28 10:11 1HTML字符实体(Character En ... -
Jquery获取浏览器宽高的代码:
2011-04-19 16:58 898Jquery获取浏览器宽高的代码: <sc ... -
转:js获取当前路径
2011-04-14 23:04 42361.获取当前完整网址 <script ty ... -
转:javascript刷新页面的一些方法
2011-03-06 09:47 844javascript刷新页面的一些方法 2)&l ... -
PSPad css编辑工具
2011-01-19 22:45 927PSPad http://www.pspad.com ... -
<EMBED>标记语法说明
2011-01-14 14:59 967<EMBED>标记语法说明SRC="文件 ... -
在Javascript中闭包(Closure)
2010-12-21 15:18 772从网上转来的一段: ...
相关推荐
总结起来,通过创建一个Vue组件并利用JavaScript来检测和模拟`position:sticky`,我们可以有效地解决在不支持`position: sticky`的浏览器(尤其是旧版Android设备)上的兼容性问题。这种方式保证了布局在各种环境下...
`JSON.stringify()`和`JSON.parse()`是JavaScript处理JSON的核心方法,但在旧版浏览器中可能需要额外的兼容性处理。通过引入如`json2.js`这样的库,我们可以确保在广泛的浏览器环境中都能正确地处理JSON。在实际开发...
通过理解并利用JavaScript内置的`URLSearchParams`、Node.js的`querystring`模块、第三方库如`query-string`,或是自定义的解决方案,都可以实现轻量级且兼容的URL参数处理。同时,确保代码在不同环境下具有良好的...
综上所述,"java转js工具"是一个重要的开发辅助工具,它帮助开发者在Java和JavaScript之间架起桥梁,使得跨平台开发变得更加便捷。然而,使用时需要注意语言特性的差异,以及转换过程中可能出现的问题和挑战。
在这个"video.js 兼容ie8 的demo"中,开发者已经找到了一种可行的解决方案,并创建了一个实际工作的示例。 首先,为了在IE8中实现HTML5视频播放,我们需要依赖Flash Player。`video.js`提供了一个名为`flash`的后援...
标题“js兼容es5-es6.rar”表明这是一个解决ES5和ES6兼容性问题的资源包,它提供了一种方式来使得ES6的新特性在不完全支持它们的浏览器中也能工作,特别是针对IE7和IE8这样的老版本。 描述中提到,“本方法支持大...
JavaScript兼容性是Web开发中的一个重要话题,特别是在处理不同的浏览器,如Firefox和Internet Explorer时。由于JavaScript引擎在不同浏览器上的实现存在差异,开发者需要理解和解决这些兼容性问题,以确保他们的...
### JS的兼容性问题详解 #### 一、概述 JavaScript(简称JS)作为现代Web开发不可或缺的一部分,在前端开发中占据着极其重要的位置。然而,由于不同的浏览器对于JS的支持程度和解释方式存在差异,这就导致了一个...
`IE8.js`着重于解决IE8中的兼容性问题,这个版本的IE对很多现代JavaScript特性支持不足,如函数对象的`addEventListener`和`removeEventListener`方法,以及对JSON的支持。`IE8.js`会模拟这些特性,使开发者能够使用...
在JavaScript中导入Excel文件,尤其是在兼容古老的Internet Explorer 11(IE11)浏览器时,需要考虑到这个浏览器并不支持现代的File API和其他先进的Web技术。本文将深入探讨如何实现这一功能,以及涉及到的关键知识...
如果你需要处理其他格式的日期时间字符串,你可以使用 JavaScript 的内置函数或者第三方库(如 moment.js 或 date-fns)来转换字符串格式。 例如,以下是一个简单的转换函数示例: ```javascript function ...
3. **生成Word文档**:使用`jquery.wordexport.js`将格式化的HTML转换为Word兼容的格式,如.doc或.docx。这个过程涉及将HTML转换为MIME类型为"application/vnd.openxmlformats-officedocument.wordprocessingml....
在给定的“JS图片查看器(缩放/旋转/翻转)兼容性强.rar”压缩包中,我们关注的是一个利用JavaScript实现的图片查看器,它具有图像缩放、旋转和翻转的功能,并且能在多种主流浏览器上运行良好,这充分展示了JavaScript...
【标题】"js物理弹性漂浮广告_兼容版"指的是一个使用JavaScript编写的,具有物理弹性效果的浮动广告代码库,特别强调了它的兼容性,意味着它能够在多种浏览器和设备上正常运行。在网页设计中,漂浮广告通常是那些在...
"工具-打印:js打印插件"的标题暗示了我们将在讨论如何利用JavaScript来创建或集成一个打印插件,以便用户能够方便地打印网页中的特定部分,同时确保该功能在不同的浏览器环境下具有良好的兼容性。 **JS打印插件的...
JavaScript库如Chart.js、D3.js等利用canvas元素,可以创建各种统计图表,且兼容现代浏览器。canvas是基于像素的,所以不适合大量数据或需要高精度的矢量图形。 6. **js+vml+svg**: VML和SVG(Scalable Vector ...
JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,尤其在处理用户交互、页面动态更新以及操作DOM(文档对象模型)时起着至关重要的作用。在网页设计中,滚动条是用户浏览超出视口内容的重要工具。本文...
### 浏览器中JavaScript的兼容问题详解 #### 引言 随着Web技术的发展与进步,JavaScript(简称JS)已成为前端开发中不可或缺的一部分。然而,由于不同浏览器对JS的支持程度和解析方式存在差异,开发者在实际项目中...
在JavaScript编程中,兼容性问题始终是一个不可忽视的挑战,特别是在处理不同的Internet Explorer(IE)版本时。"javascript解决IE9兼容.rar"这个压缩包文件包含了解决IE9兼容性问题的一些关键资源,如检测浏览器...