Firefox、IE、Safari、Chrome、Opera浏览器之差异

1、如何识别个浏览器
可以通过window.navigator.userAgent,取其取特征字符串来识别

 

2、scrollTop,scrollLeft,clientWidth,clientHeight如何获取
html带DOCTYPE和不带的情况有所区别。同时Safari与其他浏览器也有区别。
IE、FireFox、Chrome、Opera,带DOCTYPE时,需要通过document.documentElement来获取4个属性。不带DOCTYPE时,需要通过document.body来获取
Safari 不管哪种情况下,都需要通过document.body来获取scrollTop和scrollLeft。 但是如果带DOCTYPE,需要通过document.documentElement来获取clientWidth和clientHeight
function getDocumentBody() {
    return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
}

// 各浏览器获取scrollTop的统一接口
function getScrollTop() {
    if (/safari/i.exec(window.navigator.userAgent)) { return document.body.scrollTop; }
    else return getDocumentBody().scrollTop;
}

// 各浏览器获取scrollLeft的统一接口
function getScrollLeft() {
    if (/safari/i.exec(window.navigator.userAgent)) { return document.body.scrollLeft; }
    else return getDocumentBody().scrollLeft;
}

function getClientWidth() {
  return getDocumentBody().clientWidth;
}

function getClientHeight() {
  return getDocumentBody().clientHeight;
}


3、iframe背景透明
区别:IE需要在iframe中设置allowTranspancy = "true",其他浏览器默认支持背景透明。

 

4、URL编码的支持
这样的地址 http://www.baidu.co%6D
IE、Safari、Chrome、Opera支持,FF不支持。 支持的浏览器中,除FF不会将http://www.baidu.co%6d/翻译回http://www.baidu.com,其他浏览器都会进行ascii的解码

 

5、iframe高度判断
iframe加载完毕,IE8、FF、Opera、Safari、Chrome通过如下方法获取frame的高度
            this.height = this.contentDocument.body.offsetHeight;
IE6 通过如下方法获取frame的高度
 this.height = this.Document.body.scrollHeight;

判断方法如下(this代表iframe dom对象):
        if (this.contentDocument && this.contentDocument.body.offsetHeight) {
            this.height = this.contentDocument.body.offsetHeight;
        } else if (this.Document && this.Document.body.scrollHeight) {
            this.height = this.Document.body.scrollHeight;
        }
注:iframe的document属性指其父document,Document指其包含的document


6、mouseout事件的触发
一个例子:div里面包含了一个select,IE下鼠标移到select弹出的option时,其父节点将受到mouseout事件。 FF、Safari、Chrome、Opera不会有这个问题。
解决的办法,IE在div处理mouseout事件时,进行判断:
if (window.event.toElement != null) {
 //说明鼠标移出了div
}

 

7、绑定事件处理函数
IE 支持 attachEvent
FireFox、Chrome、Safari 支持 addEventListener
Opera 两者都支持

例子:
if (/.*(Firefox|Safari|Chrome).*/.exec(window.navigator.userAgent)) {
    window.addEventListener('load', adjustPage, false);
}
else {
    window.attachEvent('onload', adjustPage);
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值