javascript兼容ie9以下浏览器的方法

2024-09-05

浏览器兼容性之JavaScript篇

近期公司职务变动,我大部分工作时间都在做web前端开发.工作性质主要是跟javascript和css(层叠样式表)打交道,而JavaScript兼容性一直是Web开发者的心病,当然我也不例外,虽然我大学时自己也试着搞过几个网站,但当时才疏学浅兼容性这方面的功能根本没有考虑过,导致开发出来的网站在不同浏览器下其形怪异,各种异常,不仅用户不满意,连自己也有点羞愧自己的技术不到位.现在有了这些意识加上行动,问题就会得到解决,在这里总结一些在开发过程中遇到的问题及解决方法,记录到博客园方便自己以后查阅,

JavaScript 兼容各大浏览器阻止冒泡事件

JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.caller.arguments[0] || event; //若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容 if (e && e.stopPropagation) { // this code is for Mozilla and Opera e.stopPropagat

上传图片转为base64格式预览并压缩图片（不兼容IE9以下浏览器，兼容移动端ios,android）

前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传,为用户的流量和上传速度考虑,我决定做一下优化,看能不能在预览前就压缩一下图片尺寸. 结果又是一阵百度,发现一个靠谱的封装好的base64图片预览及压缩的方法. 直接上下载地址吧: http://www.imwinlion.com/wp-content/uploads/2016/05/localre

placeholder解决兼容各种IE浏览器的方法

<input id="search" type="text" class="box" class="inputText" value="请输入关键词" onfocus="if (value =='快来找你感兴趣的文章'){value =''}" onblur="if (value ==''){value='快来找你感兴趣的文章'}"> 用JS判断value

文字溢出显示省略号，兼容ie9以上浏览器

最近遇上一个问题,文字溢出展示省略号在ie上不管用,经过查找,是少了word-wrap: normal;这个css属性 width:100px; overflow: hidden; white-space: nowrap; word-wrap: normal; text-overflow: ellipsis;

兼容ie浏览器的方法

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在雅朋网的一个网友帖子的帮助下解决了问题,也参考了千寻学习网的资料,先将解决方法总结如下: 首先需要确保你的HTML页面开始部

javascript的window.ActiveXObject对象，区别浏览器的方法

(window.ActiveXObject)的作用,用来判断浏览器是否支持ActiveX控件,如果支持ActiveX控件,我们可以利用var xml=new ActiveXObject("Microsoft.XMLHTTP")的形式来创建XMLHTTPRequest对象(这是在IE7以前的版本中).在较新的IE版本中可以利用var xml=new ActiveXObject("Msxml2.XMLHTTP")的形式创建XMLHttpRequest对象:而在IE7及非

关于onscroll函数兼容各浏览器的方法分析

关于window.onscroll函数兼容各浏览器的方法分析 1.当前文档的渲染模式是决定onscroll函数兼容性根本原因目前浏览器的排版引擎有三种模式:怪异模式(Quirks mode).接近标准模式(Almost standards mode).以及标准模式(Standards mode).对HTML文件来说,浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理.如果文档没有声明DOCTYPE,会令浏览器触发怪异模式.例如<!DOCTYPE html>,是所有可用的

阻止a标签跳转四种方法兼容各大浏览器(包括IE)

阻止a标签跳转四种方法兼容各大浏览器(包括IE) HTML  <a href="javascript:;">我不会被跳转</a>  <a href="javascript:void(0)">我不会被跳转</a>  <a href="http://www.baidu.com" onclick=&qu

原生JavaScript常用本地浏览器存储方法一(方法类型)

有时需要将网页中的一些数据保存在浏览器端.好处就是当下次访问页面时,直接就可以从本地读取数据,不需要再次向服务器请求数据.目前常用的有以下几种方法: 1.cookie cookie会随着每次HTTP请求头信息一起发送,无形中增加了网络流量,另外,cookie能存储的数据容量有限,根据浏览器类型不同而不同,IE6大约只能存储2K. 2.Flash ShareObject 这种方式能能解决上面提到的cookie存储的两个弊端,而且能够跨浏览器,应该说是目前最好的本地存储方案.不过,需要在页面中插入

React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不能正确解释,很容易导致白屏.本文记录如下起因在准备提测的那天,顺便打开IE9看一眼(注意,这里是原生IE9 ,不是用IE11模拟的IE9),OMG! 排查后发现,原来是因为构造函数中使用了this.简写如下 class Child extends React.Component { cons

【转】向HTML中插入视频并兼容所有浏览器的方法

原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. 前者的兼容性没得说,但是使用起来不太方便,后者使用起来很方便,但是兼容性让人头疼. 虽

JS兼容IE浏览器的方法

背景系统需要兼容蛋疼的IE6... 解决方案 *{ 兼容IE6-8 }*  *{ 兼容IE9或以上 }* <!--[if gte IE 9]> <script src="@{'/public/plugins/eas

placeholder兼容方法（兼容IE8以上浏览器）

//placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' in document.createElement('input'); }, //初始化 init: function () { if (!this._check()) { this.fix(); } }, //修复 fix: function () { jQuery(':input[placehol

Vue2+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev babel-polyfill 在入口main.js文件引入:import 'babel-polyfill' 最后一步,在build文件夹下找到webpack.base.conf.js.修改入口方式: entry: {app: ["babel-polyfill", "./src/m

创建ajax对象并兼容多个浏览器方法简单记录

这篇文章主要介绍了如何创建ajax对象并兼容多个浏览器,需要的朋友可以参考下<script> function createAjax(){ var request=false; //window对象中有XMLHttpRequest存在就是非IE,包括(IE7以上版本) if(window.XMLHttpRequest){ request=new XMLHttpRequest(); if(request.overrideMimeType){ request.overrideMimeType(&q

JavaScript权威指南--WEB浏览器中的javascript

知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window对象定义了一些属性,比如:Location对象的location属性,Location对象指定当前显示在窗口的URL,并允许脚本往窗口里载入新的URL. //设置location属性,跳转至新的页面 window.location = "https://www.baidu.com" win

文本框的onchange事件，如何兼容各大浏览器

在项目中经常会遇到对用户输入的数据进行实时校验,而不是等文本框失去焦点或用户手动点击校验. 首先分析下在哪些情况下文本框会产生change事件. 1.用户通过键盘入正常字符时: 2.用户通过键盘输入非正常字符时 ctrl+v ctrl+x ctrl+z delete Backspace 等操作时: 3.用户通过鼠标进行粘贴.剪切.撤消等操作时: <body> <input id="text1" type="text"/> <div id

[转]Javascript定义类的三种方法

作者: 阮一峰原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越庞大的项目. Javascript代码的复杂度也直线上升.单个网页包含10000行Javascript代码

JavaScript 兼容 Array.prototype.slice.call

IE9之前的IE版本的HTMLCollection以及NodeList不是Object的子类. 在通过Array.prototype.slice.call进行数组化的时候,IE9之前的IE版本会抛出异常,因此需要进行兼容处理. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

Javascript数组系列三之迭代方法2

今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们的开发效率以及数据的处理.接下来我们继续来讲解其他的一些迭代的方法. 天也黑了,时间也不早了,话不多说,撸起袖子干起来! 数组的迭代方法 reduce 该方法对一个累加值和数组中的每一个元素执行给定的函数,返回一个函数累计处理的结果. 乍一看定义好像不是很好理解,来看一个例子你就会立刻明白,简单来说该方法就是

javascript兼容ie9以下浏览器的方法

热门专题