分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

JS常见兼容性问题

发布时间:2023-09-06 02:16责任编辑:赖小花关键词:暂无标签

兼容性问题:函数(方法)兼容

描述:部分W3C指定的函数,有部分老的浏览器不支持

解决:

条件判断,如果有,则使用,添加原型方法,例如 String 的 trim 方法

if(!String.prototype.trim){ ???String.prototype.trim = function(){ ???????return this.replace(/^\s\s*/,‘‘).replace(/\s\s*$/,‘‘) ???}}

兼容性问题:浏览器视口、屏幕、页面宽高获取

解决:

1. 获得当前页面 HTML文档所在窗口 宽度

//所有浏览器都支持这种写法,不存在兼容性问题
var w = document.body.clientWidthvar h = document.body.clientHeight

2. 获得浏 览器窗口内部 宽度 / 高度 ,比 HTML文档所在窗口宽度 多 16px

// document.documentElement.clientWidth IE浏览器写法// window.innerWidth 其他浏览器写法var w = document.documentElement.clientWidth || window.innerWidthvar h = document.documentElement.clientHeight || window.innerHeight

3.获得 HTML页面内容 宽度 / 高度 (文档实际高度)

//没有兼容性问题var h = document.body.scrollHeightvar h = document.body.scrollWidth

4. 获得当前页面 被卷去的高度 / 宽度

//window.pageYOffset 其他浏览器写法//document.documentElement.scrollTop IE浏览器写法var offsetY = window.pageYOffset || document.documentElement.scrollTop

兼容性问题:事件

获取事件

 ???document.onclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持; ???????var e=ev; ???????console.log(e); ???} ???document.onclick=function(){//谷歌和IE支持,火狐不支持; ???????var e=event; ???????console.log(e); ???} ???document.onclick=function(ev){//兼容写法; ???????var e=ev||window.event; ???????var mouseX=e.clientX;//鼠标X轴的坐标 ???????var mouseY=e.clientY;//鼠标Y轴的坐标 ???}

JS常见兼容性问题

原文地址:https://www.cnblogs.com/xiaoliwang/p/9734641.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved