精华内容
下载资源
问答
  • 浏览器兼容性

    2018-08-09 10:27:12
    浏览器兼容性即网页兼容性或网站兼容性,是指因为不同浏览器使用内核及所支持的HTML等网页语言标准不同;以及客户端环境不同,如分辨率等,网页在各种浏览器上的显示效果可能不一致。 DOM兼容性: 在使用...

    浏览器兼容性即网页兼容性或网站兼容性,是指因为不同浏览器使用内核及所支持的HTML等网页语言标准不同;以及客户端环境不同,如分辨率等,网页在各种浏览器上的显示效果可能不一致。

    DOM兼容性:

    在使用JavaScript获取触发事件的源目标时IE和FireFox(火狐)不同表现,也就是说是网页中那个元素触发了事件

    1. 在IE浏览器里使用srcElement( 常用的event.srcElement.value ..得到标记的各种属性值 
      event.srcElement.parentElement.各属性,如event.srcElement.parentElement.title 得到上一节点标签名称和title属性值 
      event.srcElement.各标签属性,如第一个子标签为event.srcElement.firstChild
      event.srcElement.parentNode,如event.srcElement.parentNode.tagName得到上一个节点的标签名称 )

    2. 在FireFox(火狐)浏览器里使用target,如event.target.name,event.target.id

    使用Dom获取和更改网页标签元素内文本的问题

    1. 在IE浏览器里使用innerText
    2. 在FireFox(火狐)浏览器里使用textContent

    鼠标在元素内的位置

    1. IE中使用offsetX和offsetY来获取鼠标在网页中某一元素的位置
    2. FireFox使用layerX和layerY来得到鼠标在网页中某一元素的位置

    动态为网页或元素绑定与删除事件的问题

    1. 在IE中绑定事件的方法是attachEvent
    2. 在IE中删除绑定事件的方法是detachEvent
    3. 在FireFox中绑定事件的方法是addEventListener
    4. 在FireFox中删除绑定事件的方法是removeEventListener

    DOM兼容性及其他小知识链接:http://www.html-js.com/article/JavaScript-1-part-of-the-DOM-operating-compatibility-and-other-small-knowledge

    EVENT兼容性:

    JavaScript event兼容性随笔链接:http://www.cnblogs.com/jasenkin/p/javascript_event.html

    IE和Firefox浏览器的event事件兼容性汇总:https://blog.csdn.net/bob007/article/details/6547507

    浏览器兼容性改造之HTML Event 博客:https://blog.csdn.net/xuanze520/article/details/8060714

    常见JS兼容性问题:

    当要使用的特性和平台有关时,先进行检测再使用,检测方式有两种:一是直接检测平台是否支持该特性,二是检测平台类型再使用相应的特性。

    1. IE有window.event对象,火狐没有window.event对象。可以通过给函数传递event对象,如οnmοusemοve=doMouseMove(event)
    2. IE下,event对象有srcElement属性,但是没有target属性,火狐下,even对象有target属性,但是没有srcElement。可以使用obj(obj=event.srcElement?event.srcElement:event.target;)来代替IE下的event.srcElement或者火狐下的event.target,同时还要注意event的兼容性。
    3. 窗体的高度和宽度:IE为document.body.offsetWidth和document.body.offsetHeight,注意此时页面一定要有body标签。火狐为window.innerWidth和window.innerHeight,及document.documentElement.clientWidth和document.documentElement.clientHeight。通用为document.body.clientWidth和document.body.clientHeight。
    4. IE下input.type属性为只读,火狐下input.type属性为读写。
    5. IE或者火狐2.0x下,可以使用window.location或window.location.href,火狐1.5x下只能使用window.location。可以使用window.location代替window.location.href。
    6. IE下可以通过showModalDialog和showModelessDialog打开模态和非模态窗口,火狐下则不能。可以直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口,如var parWin=window.opener;parWin.document.getElementById("Aqing")="Aqing";
    7. 捕获事件:火狐没有setCapture()、releaseCapture()方法,解决:IE使用obj.setCapture()或obj.releaseCapture(),火狐使用:
      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)
      }
    8. 禁止选取网页内容,火狐要用css禁止:-moz-user-select:none;IE使用JS:obj.onselectstart=function(){return false;}
    9. CSS透明,IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。火狐:opacity:0.6。
    10. CSS圆角:IE不支持圆角。火狐:-moz-border-radius:4px或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;
    11. CSS双线凹凸边框,IE:border:2px outset;火狐:-moz-border-top-colors:#d4d0c8 white;-moz-border-left-colors:#d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
    展开全文
  • window.event IE:有window.event对象 FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event) 鼠标... FF:event.layerX和event.layerY。 标签的x和y的坐标位置:sty
  • JS的浏览器兼容性

    2013-12-26 10:53:49
    使用JS一定要考虑浏览器兼容性。现在firefox的市场份额不容忽视,所以一个好的JS程序至少应该在主流的几个浏览器下能够正确运行。编写的时候遵循W3C标准,一般都不会有什么问题。 下面这篇文章讲述了如何进行JS的...
    使用JS一定要考虑浏览器兼容性。现在firefox的市场份额不容忽视,所以一个好的JS程序至少应该在主流的几个浏览器下能够正确运行。编写的时候遵循W3C标准,一般都不会有什么问题。
    
    下面这篇文章讲述了如何进行JS的调试:
    
    这篇文章讲述了JS在IE和Firefox下的兼容性问题:
    
    以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox
    
    1. document.form.item 问题
    (1)现有问题:
    现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行
    (2)解决方法:
    改用 document.formName.elements["elementName"]
    (3)其它
    参见 2
    
    2. 集合类对象问题
    (1)现有问题:
    现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能。
    (2)解决方法:
    改用 [] 作为下标运算。如:document.forms("formName") 改为 document.forms["formName"]。
    又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
    (3)其它
    
    3. window.event
    (1)现有问题:
    使用 window.event 无法在 MF 上运行
    (2)解决方法:
    MF 的 event 只能在事件发生的现场使用,此问题暂无法解决。可以这样变通:
    原代码(可在IE中运行):
    <input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit()"/>
    ...
    <script language="javascript">
    function gotoSubmit() {
    ...
    alert(window.event); // use window.event
    ...
    }
    </script>
    
    新代码(可在IE和MF中运行):
    <input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/>
    ...
    <script language="javascript">
    function gotoSubmit(evt) {
    evt = evt ? evt : (window.event ? window.event : null);
    ...
    alert(evt); // use evt
    ...
    }
    </script>
    此外,如果新代码中第一行不改,与老代码一样的话(即 gotoSubmit 调用没有给参数),则仍然只能在IE中运行,但不会出错。所以,这种方案 tpl 部分仍与老代码兼容。
    
    4. HTML 对象的 id 作为对象名的问题
    (1)现有问题
    在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
    (2)解决方法
    用 getElementById("idName") 代替 idName 作为对象变量使用。
    
    5. 用idName字符串取得对象的问题
    (1)现有问题
    在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在MF 中不能。
    (2)解决方法
    用 getElementById(idName) 代替 eval(idName)。
    
    6. 变量名与某 HTML 对象 id 相同的问题
    (1)现有问题
    在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
    (2)解决方法
    在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
    此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
    (3)其它
    参见 问题4
    
    7. event.x 与 event.y 问题
    (1)现有问题
    在IE 中,event 对象有 x, y 属性,MF中没有。
    (2)解决方法
    在MF中,与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 与 MF 中都有,具体意义有无差别尚未试验。
    
    8. 关于frame
    (1)现有问题
    在 IE中 可以用window.testFrame取得该frame,mf中不行
    (2)解决方法
    在frame的使用方面mf和ie的最主要的区别是:
    如果在frame标签中书写了以下属性:
    <frame src="xx.htm" id="frameId" name="frameName" />
    那么ie可以通过id或者name访问这个frame对应的window对象
    而mf只可以通过name来访问这个frame对应的window对象
    例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问
    ie: window.top.frameId或者window.top.frameName来访问这个window对象
    mf: 只能这样window.top.frameName来访问这个window对象
    
    另外,在mf和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. 在mf中,自己定义的属性必须getAttribute()取得
    10.在mf中没有 parentElement parement.children 而用
    parentNode parentNode.childNodes
    childNodes的下标的含义在IE和MF中不同,MF使用DOM规范,childNodes中会插入空白文本节点。
    一般可以通过node.getElementsByTagName()来回避这个问题。
    当html中节点缺失时,IE和MF对parentNode的解释不同,例如
    <form>
    <table>
    <input/>
    </table>
    </form>
    MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
    
    MF中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)
    
    11.const 问题
    (1)现有问题:
    在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
    (2)解决方法:
    不使用 const ,以 var 代替。
    
    12. body 对象
    MF的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在
    
    13. url encoding
    在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
    frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
    一般会服务器报错参数没有找到
    当然如果是在tpl中例外,因为tpl中符合xml规范,要求&书写为&
    一般MF无法识别js中的&
    
    14. nodeName 和 tagName 问题
    (1)现有问题:
    在MF中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值。在 IE 中,nodeName 的使用好象
    有问题(具体情况没有测试,但我的IE已经死了好几次)。
    (2)解决方法:
    使用 tagName,但应检测其是否为空。
    
    15. 元素属性
    IE下 input.type属性为只读,但是MF下可以修改
    
    16. document.getElementsByName() 和 document.all[name] 的问题
    (1)现有问题:
    在 IE 中,getElementsByName()、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取的元素还不知道)。
    NEXT: »» MySQL 的 root 密码忘记解决办法
    PREV: «« OA数据转换成功!
    评论排序 | 评论:3
    引用评论 阿峰 [2005-10-05 08:16:21]
    1. 对象问题
    1.1 Form对象
    现有问题:
    现有代码这获得form对象通过document.forms("formName"),这样使用在IE 能接受,MF 不能。
    解决方法:
    改用 作为下标运算。改为document.forms["formName"]
    备注
    上述的改用 作为下标运算中的formName是id而name
    
    1.2 HTML对象
    现有问题:
    在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
    document.all("itemName")或者document.all("itemId")
    解决方法:
    使用对象ID作为对象变量名
    document.getElementById("itemId")
    备注
    document.all是IE自定义的方法,所以请大家尽量不使用。
    还有一种方式,在IE和MF都可以使用
    var f = document.forms["formName "];
    var o = f. itemId;
    
    1.3 DIV对象
    现有问题:
    在 IE 中,DIV对象可以使用ID作为对象变量名直接使用。在 MF 中不能。
    DivId.style.display = "none"
    解决方法:
    document.getElementById("DivId").style.display = "none"
    备注
    获得对象的方法不管是不是DIV对象,都使用getElementById方法。参见1.2
    
    1.4 关于frame
    现有问题
    在 IE中 可以用window.testFrame取得该frame,mf中不行
    解决方法
    在frame的使用方面MF和IE的最主要的区别是:
    如果在frame标签中书写了以下属性:
    
    那么IE可以通过id或者name访问这个frame对应的window对象
    而mf只可以通过name来访问这个frame对应的window对象
    例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问
    IE: window.top.frameId或者window.top.frameName来访问这个window对象
    MF:只能这样window.top.frameName来访问这个window对象
    另外,在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
    并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
    也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
    
    1.5 窗口
    现有问题
    IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口,但是MF不支持。
    解决办法
    直接使用window.open(pageURL,name,parameters)方式打开新窗口。
    如果需要传递参数,可以使用frame或者iframe。
    
    2. 总结
    2.1 在JS中定义各种对象变量名时,尽量使用id,避免使用name。
    在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能,所以在平常使用时请尽量使用id,避免只使用name,而不使用id。
    
    2.2 变量名与某 HTML 对象 id 相同的问题
    现有问题
    在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
    解决方法
    在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
    此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误
    展开全文
  • javascript的兼容性

    2019-08-11 18:30:14
    javascript的浏览器兼容问题是前端开发中一直存在的一个问题,和css兼容性一样,我们在开发过程中必须了解一些基本的兼容性处理方法,下面从以下几个方面总结下js开发常碰到的问题。 1 常用的方法兼容 2 样式访问...

        javascript的浏览器兼容问题是前端开发中一直存在的一个问题,和css兼容性一样,我们在开发过程中
    必须了解一些基本的兼容性处理方法,下面从以下几个方面总结下js开发常碰到的问题。

    1 常用的方法兼容 2 样式访问兼容 3 DOM选取及对象引用 4 事件处理 5 其他兼容 6 浏览器判断


    (注意:文中所有涉及到标签的例子,为了不使标签被编辑器翻译 标签书写时都加了空格,如
    < li>1< /li> )
    .getYear方法
    获取日期时经常用到的方法,例如 var year = new Date().getYear(); 在ie中得到的是当前年份2011

    但是在ff中式是111,

    解决方法:year = year<1900?1900+year:year  或者用getFullYear方法

    .Css的float属性
    Js访问给定css的属性方法是:obj.style.property 但是css中个别属性和js保留字是一样的,所以在获取这些
    特殊的css属性时写法不同 例如获取一个对象的float属性:

    ie中 Obj.style.styleFloat  火狐中: Obj.style.cssFloat

    解决方法:添加浏览器判断


    .访问设置class属性
    class也是js的保留字,获取class的方法也有不同

    ie8之前版本的ie:Obj.getAttribute(“className”);

    ie8 ie9 以及火狐:Obj.getAttribute(“class”);

    setAttribute方法和getAttribute的方式一样

    解决方法:先判断浏览器或者使用obj.className直接设置


    .对象高宽问题

    火狐中如果将一个对象的height属性值赋给另一个对象的height样式,obj.style.height=imgObj.height这种写法是无法识别的,这个问题在使用对象的clientHeight和clientWidth属性时也会遇到

    解决方法:obj.style.height=imgobj.height+”px” 在给样式赋值时后面加上px


    .集合对象访问
    Ie下可以使用()或[]获取集合类对象,火狐只能用[]

    Alert(document.forms(“formName”)) 火狐无法识别,

    Alert(document.forms[“formName”]) 都可以识别,处理方式:使用[]获取


    .Iframe引用
    ie可以通过id或者name访问这个iframe的window对象,但是火狐只能通过name访问,

    解决方法:统一用name获取iframe对象或者使用document.getElementById(“frameId”)获取

    例如 alert(window.fr2); //火狐得不到 alert(window.fr1); //都能得到


    .获取父节点
    ie中支持parentElement和parentNode,火狐中只能用parentNode获取。

    解决方法:统一用parentNode获取,obj.parentNode


    .childNodes获取子节点
    < ul id="ul" >
    < li>1< /li>
    < li>2< /li>
    < li>3< /li>< /ul>


     

     

    火狐得到长度是7 ie是3

    解决方法:使用jQuery或者在通过nodeName==“#text”在循环
    中把文本节点剔除如下:
    var ch=document.getElementById("ul").childNodes;
    for(i= 0;i.if(ch[i].nodeName=="#text"){
      if(ch[i].nodeName=="#text"){
         alert("文本节点");continue;
       }
    alert("每一个li节点我会弹出一次");
    }
    .节点操作removeChild和removeNode
    removeNode()参数为false或者true

    false:只删除本身

    true:删除本身以及下属节点

    在火狐中没有removeNode方法,只能通过removeChild方法代替

    解决方法:用removeChild实现删除节点的效果

    或者用jQuery的方法如下
    < ul id="ul" >
    < li>1< /li>
    < li>2< /li>
    < li>3< /li>< /ul>


    var ul= document.getElementById("ul");
    ul.removeNode(true);//ie删除方法
    ul.parentNode.removeChild(ul);//火狐删除方法

    .innerText的用法
    innerText获取节点内的文本吗,ie中正常,火狐中不识别火狐中使用的是textContent

    解决方法:判断浏览器或者使用jQuery


    .Window.event事件对象,ie中可以获取,火狐中无法获取
    Function test1(){

    alert(event);//ie存在火狐不存在

    }

    Function test2(ev){

    alert(ev);//ie存在火狐存在

    }

    解决方法:传递event参数给调用的方法,如下
    < input type="button" value="test" οnclick="testEvent(event)" / >
    function testEvent(eventTa){
    var e = eventTa||window.event;
    var srcElement= e.srcElement||e.target;
    }

    其中e.srcElement是id获取事件源对象,e.target是火狐获取事件源对象varsrcElement=e.srcElement||e.target;是兼容写法


    .offsetX offsetY
    获取鼠标当前坐标,包含滚动 火狐不支持

    解决方法:

    用layerX和layerY替代,效果一样


    .Event.X和event.Y
    获取鼠标当前坐标,不包含滚动 火狐不支持

    解决方法:

    用pageX和pageY代替


    .捕获键盘值
    ie中event.keyCode获取 火狐中用event.which获取

    如下:

    function testEvent(eventTa){

    //获取时间对象

    vare = eventTa||window.event;

    //获取事件源对象

    varsrcElement= e.srcElement||e.target;

    //获取按键对象

    varkey = e.which||e.keyCode;

    //如果同时按下ctrl和回车键则进入

    if(e.ctrlKey&&(key==13)){

    alert("ctrl+enter");

    }

    }


    .鼠标位置,事件对象综合示例:
    < input style="height:20px;width:130px;border:1px solid #000;" οnclick="caTest(event,this)"  / >
    function caTest(eventTa,obj){

    //如果tip对象已经存在,则情况其内容,并且删除该对象

    if(document.getElementById("tip")){
      //如果tip对象已经存在,则情况其内容,并且删除该对象

      if(document.getElementById("tip")){

          document.getElementById("tip").innerHTML="";

      if(navigator.userAgent.indexOf(“MSIE”)!=-1){//ie删除节点方法

          document.getElementById("tip").removeNode();

      }else{

        //火狐
        document.getElementById("tip").parentNode.removeChild(document.getElementById("tip"));

      }

    }

    //obj为input对象本身,这里获取input对象的坐标

    varobjx= obj.offsetLeft;

    varobjy= obj.offsetTop;

    //获取事件对象和当前鼠标的位置

    vare = eventTa||window.event;

    varx = e.pageX||e.x;

    vary = e.pageY||e.y; 见下页
    //创建一个div对象

    vardiv = document.createElement("div");

    div.id="tip";

    //设置为绝对定位

    div.style.position="absolute";

    //设置div的位置,x和y是之前取得的鼠标位置

    div.style.top=y+"px";

    div.style.left=x+"px";

    //设置div大小颜色等

    div.style.border="1px solid #123";

    div.style.width="200px";

    div.style.height="100px";

    div.style.background="#fee“;

    将div对象写入body中

    document.getElementById("body").appendChild(div);

    document.getElementById("tip").innerHTML="提示信息
    提示信息提示信";

    }

    转载于:https://www.cnblogs.com/hemood/archive/2011/05/26/2057806.html

    展开全文
  • js浏览器兼容性问题

    2015-06-13 18:16:38
    这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码。就会造来客户的投诉,如果让BoSS知道了,这可不太好哦。下面是兼容IE和FF的js脚本做法和分解(部分选自网上):      .以下以 IE 代替 ...
    做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同。这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码。就会造来客户的投诉,如果让BoSS知道了,这可不太好哦。下面是兼容IE和FF的js脚本做法和分解(部分选自网上):  
    
      
      
    .以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox  
      
    //window.event   
    IE:有window.event对象   
    FF:没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=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.οnclick=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;。 

    原文链接

    http://dada-fangfang.iteye.com/blog/811749

    展开全文
  • 事件的兼容性

    2021-09-15 21:09:22
    pageX/pageY:获取当前鼠标位置,相对于页面而言,等价于layerX/layerY offsetX/offsetY:获取当前鼠标位置,相对于事件标签而言 事件绑定与取消 事件绑定与取消需要进行浏览器兼容处理 标准浏览器 事件...
  • layerX && layerY

    2015-05-23 21:59:00
    转载:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX UIEvent.layerX  非标准  这个属性是非标准的属性...在不同的浏览器上的实现由许多的兼容性问题。  而且,这个属性的行为将来还可能...
  • 兼容性

    2013-10-24 16:12:54
    这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码。就会造来客户的投诉,如果让BoSS知道了,这可不太好哦。下面是兼容IE和FF的js脚本做法和分解(部分选自网上): .以下以 IE 代替 ...
  • javascript兼容性

    千次阅读 2011-03-05 00:34:00
      JavaScript兼容性一直是Web开发者的一个主要问题,为此,总结下IE和Firefox的Javascript兼容性: 参考: 一、函数和方法差异 1. getYear()方法 【分析说明】先看一下以下代码:...
  • JAVASCRIPT兼容性问题

    2014-04-13 17:28:49
    另一方面,我们上面的假定也仅仅是假定,不能确保是这样,如果浏览器的某些对象或属性不能向后兼容,我们的代码也会产生问题,所以建议,少用浏览器版本的比较,更多情况下,应检测是要用的对象或属性是否得到支持。...
  • 事件兼容性

    2017-06-07 12:12:44
    <!... var left = e.layerX || e.offsetX; //判断是ie和非ie距离事件源的方法 var top = e.layerY || e.offsetY; document.title = left + '|' + top; } }
  • 关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y ...兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的...
  • JavaScript的浏览器兼容问题是前端开发中一直存在的一个问题,和css兼容性一样,我们在开发过程中必须了解一些基本的兼容性处理方法,下面从以下几个方面总结下js开发常碰到的问题:1、常用的方法兼容;2、样式访问...
  • [转] Javascript的IE和Firefox兼容性汇编

    千次阅读 2005-12-27 09:44:00
    [转] Javascript的IE和Firefox兼容性汇编说明:IE和Firefox的兼容性问题是比较突出的,因为firefox遵循W3C标准,但是IE定义了很多私有的东西,于是兼容性问题非常突出,在网上看到此文,美化后转载,原文作者不详。...
  • 最近作浏览器兼容性方面的工作,发现此篇文章,太好了,转帖收藏了Javascript的IE和Firefox兼容性汇编 作者:yaosansi日期:2006-11-14 1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document....
  • ie ff 兼容性

    2012-05-24 20:16:16
    这篇文章讲述了JS在IE和Firefox下的兼容性问题: 以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox1. document.form.item 问题(1)现有问题:现有代码中存在许多  document.formName.item(...
  • 前几天在工作中遇见一个问题。... 当然可以用event.offsetX,event.offsetY,来获取到。... event.layerX 也不获取不到。 干脆就自己写了个方法, function getOffsetXY(evt) { if (evt.offsetX && evt.o
  • js 兼容性问题

    千次阅读 2019-02-02 10:55:39
    js兼容ff 以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox 1. document.form.item问题 (1)现有问题:现有代码中存在许多 document.formName.item("itemName")这样的语句,不能在 MF 下...
  • 在ie与火狐的兼容性

    2019-09-22 18:16:23
    1.在火狐下 document.getElementById("id").textContent可以获取当前获取id下的内容 而在ie下则为:document....JS在IE和Firefox兼容性问题汇编 以下以IE代替InternetExplorer,以MF代替MozzilaFirefox 1.docum...
  • 1、获取事件对象:  var e=e||event;   2、阻止冒泡:  e:stopPropagation?...9、ajax兼容: ... var x=e.offsetX||e.layerX; 转载于:https://www.cnblogs.com/wuqilang/p/11242028.html
  • IE/火狐兼容性区别

    2017-03-30 14:55:30
    介绍了网页上常用的IE/火狐兼容性该页的做法,并给出了代码,相当实用了。为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox 。以下进入正题: //window.event IE:有window...
  • 关于js鼠标事件综合各大浏览器能获取到坐标的属性...clientX/Y:clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变兼容性:所有浏览器均支持pageX/Y:pageX/Y获取到的是触发点相对文档区域左
  • 各大浏览器兼容性问题

    千次阅读 2015-09-09 12:10:07
    中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。      实际上这是一个动态内核,与前面几个内核的最大的区别就在...
  • 这原本是一个很简单的问题,但是由于浏览器的不兼容性,给开发带来了挑战。不同浏览器分别在各自事件对象中定义了不同的属性,详见下方图表。 属性 说明  兼容性 clientX 以浏览器窗口左上顶角为...
  • js 兼容性

    2010-12-06 21:34:00
    与时俱进 博客园 社区 首页 ...兼容IE和FF的js脚本做法(比较常用) 做BS开发就难免会用到...这就需要我们程序员去兼容他们下面是兼容IE和FF的js脚本做法和分解(部分选自网上,经本人整理),希望对大家有...
  • PageX/Y:返回鼠标指针的位置,相对于文档的左边缘与上边缘,会随着页面滚动而改变兼容性:除IE6/7/8不支持外,其余浏览器均支持&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript...
  • event.layerX 在 IE 与 MF 中都有,具体意义有无差别尚未试验。 8. 关于frame (1)现有问题 在 IE中 可以用window.testFrame取得该frame,mf中不行 (2)解决方法 在frame的使用方面mf和ie的最主要的区别是: 如果在...
  • 网站兼容性(持续更新)

    千次阅读 2010-01-24 14:26:00
    在调节站点兼容性方面,没有什么统一的方法和策略,一般只针对出现的问题附加不同的兼容处理方案;当然我们也可以采用些脚本框架来减少兼容性问题的发生,例如JQUERY,目前已兼容诸多浏览器,事实上网站并非一定
  • IE FF 兼容性收集

    2018-07-17 13:31:46
    js 兼容内容: 添加事件  IE:element.attachEvent(”onclick”, func); element.detachEvent(“onclick”, func) 。  FF:element.addEventListener(”click”, func, true);element.removeEventListener(“cl....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,183
精华内容 473
关键字:

layerx的兼容性