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

最新推荐文章于 2022-11-06 21:50:09 发布

FreeWave

最新推荐文章于 2022-11-06 21:50:09 发布

阅读量1.2w

点赞数

文章标签： safari chrome opera firefox ie iframe

本文链接：https://blog.csdn.net/FreeWave/article/details/5893745

版权

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);
}