IE 支持 ES6 ie8 es6

转载

数据小筑 2024-03-18 14:52:37

文章标签 IE 支持 ES6 Back css 解决方案 文章分类 架构后端开发

ie8对待颜色值，最完整的就是 #ffffff 6位16进制数，三位也支持，但是4位就不支持了。所以以后在书写颜色值代码最好都写全了，防止不必要的bug，加班。。。。
module.exports 与export 区别：exports 与require 相匹配（ES5的用法） export 与 import匹配，是ES6的语法。
IE8的background属性支持，但是不支持background-size属性不支持，ie9以上才支持。解决办法是使用 filter:属性（ie8），但是图片的路径必须写成绝对路径。
自定义组件，webpack。同时支持模块require引用，也支持script js 单独文件引用：同时加上exports 和 window.*** 挂载到window上就可以被script标签引用。webpack打包，js es6语法转es5语法.
“” null undefined 区别（!非这三种都是true）
如果页面交互很多，需要操作dom很多的情况，可以考虑把操作dom的逻辑写到一个单独的逻辑，并且把ID名的dom用一个变量保持，这样可以防止html页面id名称改变，只需要改一次名字就可了，同时分开文件也是为了让业务逻辑更清晰，大段落的交互逻辑会影响逻辑代码的阅读性。
按钮交互高亮和置灰操作写到一个类中，通过切换类来做交互
一个盒子垂直居中新遇到的比较好用的方法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .father{
            position:relative;
            width: 500px;
            height:500px;
            background: pink;
        }
        .child{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            display: block;
            width: 362px;
            height: 278px;
            background: red;
        }

    </style>
  </head>
  <body>
    <div class="father">
        <div class="child"></div>
    </div>
  </body>
</html>

同样这个方法和 top:50%;left:50%;transform:translate(-50%,-50%);一样都比较好用。但是对待IE8使用上面的方法，不会有兼容问题，第二种方式使用了css3的语法。
9. 对于需要调用别人的接口，我们在回调函数中做业务逻辑处理的，可以自己模拟接口返回的数据，封装成一个文件，然后自己测试书写代码。
10. 对于一个网站上的地址向另外一个网站上传递参数，为了防止在传递的过程中被截获传递的信息，可以对传递的参数或者网站的登录密码做一个base64加密处理再传递。本次使用了插件js-base64 https://www.npmjs.com/package/js-base64 11. 兼容IE 浏览器的项目中，会碰到要禁用input,textarea中的backspace按钮。是为了防止：在浏览器空白处或者不可编辑的input框上，点击【Backspace】按键，出现浏览器页面回退的问题，经过测试，发现谷歌浏览器默认屏蔽了这个回退的功能，但IE、360浏览器、火狐浏览器都没有，这个功能会导致，特别是后台系统，session丢失，退回到登录页面，严重影响用户体验。
比如，用户在进行表单的信息填写，不经意在浏览器空白处点击了【Backspace】按键，退到了登录界面，想想这是个什么样的体验。

function banBackSpace(e) {
		var ev = e || window.event;
		//各种浏览器下获取事件对象
		var obj = ev.relatedTarget || ev.srcElement || ev.target || ev.currentTarget;
		//按下Backspace键
		if (ev.keyCode == 8) {
			var tagName = obj.nodeName //标签名称
			//如果标签不是input或者textarea则阻止Backspace
			if (tagName != 'INPUT' && tagName != 'TEXTAREA') {
				return stopIt(ev);
			}
			var tagType = obj.type.toUpperCase();//标签类型
			//input标签除了下面几种类型，全部阻止Backspace
			if (tagName == 'INPUT' && (tagType != 'TEXT' && tagType != 'TEXTAREA' && tagType != 'PASSWORD')) {
				return stopIt(ev);
			}
			//input或者textarea输入框如果不可编辑则阻止Backspace
			if ((tagName == 'INPUT' || tagName == 'TEXTAREA') && (obj.readOnly == true || obj.disabled == true)) {
				return stopIt(ev);
			}
		}
	}
	function stopIt(ev) {
		if (ev.preventDefault) {
			//preventDefault()方法阻止元素发生默认的行为
			ev.preventDefault();
		}
		if (ev.returnValue) {
			//IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为
			ev.returnValue = false;
		}
		return false;
	}
 
	$(function() {
		//实现对字符码的截获，keypress中屏蔽了这些功能按键
		document.onkeypress = banBackSpace;
		//对功能按键的获取
		document.onkeydown = banBackSpace;
	})

参考文章：
12.overflow-x和 overflow-y混合使用会出现问题：

如果其中一个特性值被设置成了 ‘scroll’ 或 ‘auto’，而另一个特性指定值为 ‘visible’，那么 ‘visible’ 会被设置成 ‘auto’。
当一个元素的 ‘overflow-x’ 或 ‘overflow-y’ 指定值为 ‘hidden’，另一个特性的指定值为 ‘visible’ 时，该元素最终渲染使用的 ‘overflow-y’ 或 ‘overflow-x’ 值不同。IE6 IE7 IE8 使用 ‘hidden’，其它浏览器使用 ‘auto’。
解决办法就是就尽量不要scroll和visible同时使用
13.监听DOM的变化（不是vue项目不能使用监听器）可以使用MutationObserver。具体看下面的博客。（ie11+才支持此方法）

Object.defineProperty 添加监听

IE浏览器不支持 Object.defineProperty。ie上写了先提醒缺少参数或者某个参数不能为false,然后去掉对应的参数就会显示不支持 Object.defineProperty 这是因为，IE浏览器有支持 Object.defineProperty ，但是值允许在操作DOM时使用，对于和vue中对于某个变量进行监听是不支持的。在网上找了一个工具文件，地址是：https://gitee.com/ambit/object-defineproperty-ie ，使用之后确实在IE中不报错了，但是依然不能够监听一个变量，只能手动对IE浏览器做处理，使用JS判断当前浏览器版本及浏览器做相应的处理。

Object.defineProperty 使用方法：

IE 支持 ES6 ie8 es6_IE 支持 ES6

记得后面一定要调用：_pbj.data = number 及 number值就是我们要监听的值。

placeHoder问题

ie 浏览器不支持placeHoder属性，因为这是H5 的属性。
解决方法：

自己手动写对应的，把它当做input框的value值来写。
百度找了一个兼容IE浏览器的placeHolder属性的文件，直接引入：

但是本次的需求是，Input框获取焦点的的时候，提示文字消失，失去焦点，提示文字显示：

var onFocus = function ($el, text) {
	if ($el.val() == text) {
		$el.val("");
	}
}
var onBlur = function ($el, text) {
	if ($el.val() == ") {
		$el.val(text);
	}
};

iframe标签IE下总是出现滚动条问题：

iframe在一个div中，并且iframe高度与div一样，所以设置了iframe高度是100%，结果div出现了滚动条，在排除了padding、margin的因素外，还是有滚动条。
解决方案：

父级div设置 font-size:0; .(子级里面是iframe)
iframe标签添加css属性 display:block; （使用此方法解决）
iframe标签添加css属性 vertical-aglin:top;

问题出现原因：
iframe=inline frame它是一个内联元素，默认是跟baseline对齐的，iframe后边有个看不见、摸不着的行内空白节点，空白节点占据着高度，iframe与空白节点的基线对齐，导致了div被撑开，从而出现滚动条。
找到原因了，解决方案也就简单了。
第一种，设置iframe的vertical-align:top
第二种，设置父div的font-size:0，从而影响空白节点的line-height是0，从而不占据高度。
第三种，改变iframe的内联元素性质，改为块级元素，display:block

后续问题
行内元素带来空白节点，也带来inline-block 空白节点问题。
上述解释有点笼统，关于line-height和vertical-align（top、baseline）的详细功能，还得继续研究。

注册事件（on/addEventListener）

on ：用on来注册事件，这是jQuery的语法。使用on 来注册事件不需要考虑浏览器兼容问题。
addEventListener:是原生js，用来注册事件（区分 onclick和 ‘click’）

语法
HTML 中:

<element onclick="SomeJavaScriptCode">
JavaScript 中:

object.onclick=function(){SomeJavaScriptCode};

addEventListener事件：

element.addEventListener(event, function, useCapture)
/*
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
*/

如果使用 addEventListener事件，兼容方法：

if(typeof window.addEventListener != 'undefined'){//ie9+
	window.addEventListener('message',notifyFun,false);//第三个参数true表示：true - 事件句柄在捕获阶段执行  false- false- 默认。事件句柄在冒泡阶段执行
}else if(typeof window.attachEvent != 'undefined'){//只支持IE678,不兼容其他浏览器
	window.attachEvent('onmessage',notifyFun);//是注册事件，不是解绑事件（解绑unbind）
}；


//注意点:attachEvent方法绑定的事件是带on的,addEventListener绑定的事件是不带on的

终极解决方案：

function addEvent(str,ele,fn){
      ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn);
}
function fn(){
   console.log("lalala");
}
var div=document.getElementsByTagName("div")[0];
addEvent('click',div,fn)

onmessage:该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。