#JavaScript# IE兼容

在IE浏览器中出现的问题

1.不能执行已释放 Script 的代码

1.bug出现背景：
在使用iframe标签时，如果子页面向父页面传递在子页面创建的对象（所有对象，包括数组，函数，正则等）时，会出现这个bug。

2.bug出现原因：
在子页面关闭时，会释放掉在子页面中声明赋值的对象。所以在父页面所有对这个对象的引用操作都会产生这个JS错误。

3.解决方法有2种：
第一，在父页面把所有对象都建好，在子页面对这个对象进行字符串赋值。
第二，如果子页面产生的对象数量是不定的，使用JSON.stringfy()把要回传的对象变成字符串。然后在父页面中使用JSON.parse()变成对象。

---

IE、firefox浏览器下JS的new Date()的值为Invalid Date、NaN-NaN

截图信息

1.问题出现背景：
在IE浏览器中，使用new Date("xxxx")方法，将一串日期字符串转换为具体的Date格式的时，会出现这个问题。如：
new Date("2019-03-21 10:41:33") //[date] Invalid Date[date] Invalid Date
但是这个方法却在谷歌浏览器上可以返回正确的结果。

2.问题出现原因：

字符串的格式不被IE浏览器识别，而导致的

3.解决方法：
new Date("2019/03/21 10:41:33") //[date] Thu Mar 21 2019 10:41:33 GMT+0800 (中国标准时间)[date] Thu Mar 21 2019 10:41:33 GMT+0800 (中国标准时间)

备注：在使用的时候，我们可以通过字符串转换的方式，将日期字符串格式转换为浏览器支持的格式，在使用new Date()。

var date = '2019-03-21 10:41:33';
date = date.replace(new RegExp(/-/gm) ,"/"); 　　//将所有的'-'转为'/'即可
Date d=new Date(date);

4.总结
不同的浏览器是存在差异的，以下列出了所有浏览器都支持的方式。

var d = new Date(2019, 01, 07); // yyyy, mm-1, dd  
 var d = new Date(2019, 01, 07, 11, 05, 00); // yyyy, mm-1, dd, hh, mm, ss  
 var d = new Date("02/07/2019"); // "mm/dd/yyyy"  
var d = new Date("02/07/2019 11:05:00"); // "mm/dd/yyyy hh:mm:ss"  
var d = new Date(1297076700000); // milliseconds  
var d = new Date("Mon Feb 07 2019 11:05:00 GMT"); // ""Day Mon dd yyyy hh:mm:ss GMT/UTC

---

SCRIPT600:该操作的目标元件无效

1. 问题出现背景：
   IE6-IE9使用innerHTML进行赋值.
2. 问题出现原因：
   在IE6-IE9中对Table使用innerHTML时出现的问题。例如：

<table id="table"></table>
在JS中我们这么操作他，
document.getElementById('table').innerHTML = '<tr><td>demo</td></tr>'

就回出现上面的问题。

1. 问题解决方法有三种：

第一：可以换个添加属性，如：appendChild

tbody.appendChild = "<tr></tr>"

第二：添加判断

var s = navigator.userAgent.toLowerCase();
          var BrowserInfo = {
                IsIE: /*@cc_on!@*/false,
                IsIE9Under: /*@cc_on!@*/false && (parseInt(s.match(/msie (\d+)/)[1], 10) <= 9),
            };

    if( BrowserInfo.IsIE9Under  ){
        tbody.appendChild = "<tr></tr>";
    }else{
        tbody.innerHTML = "<tr></tr>";
    } 

第三：包装整个table

var table = "<table><tbody><tr></tr></tbody></table>"   
         div.innterHTML = table;
       将最外层table也纳入到字符串中，使用div.innerHTML

---

SCRIPT438: 对象不支持“indexOf”属性或方法---for IE8

原因：IE8不支持indexOf() 这个方法
解决方法：

if(!Array.indexOf) {
    Array.prototype.indexOf = function(obj) {             
        for(var i=0; i<this.length; i++) {
                if(this[i]==obj) {
                    return i;
                }
        }
                return -1;
    }
}

---

IE8 select 下拉不能垂直居中

在IE8中line-height失效。
解决方法：

 select{
    padding:10px 0;
}

禁用浏览器的默认返回键

在IE10+ 和 chrome中我们可以使用下面的代码禁用浏览器的默认返回键

//防止页面后退 不兼容IE8~9
(function () {
    if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL);
        window.onpopstate = function () {
            history.pushState(null, null, document.URL);
        }
    }
})()

下面的问题是我们来解决如何让IE8~9的返回键禁用
背景描述以及解决思路参考https://every-best.iteye.com/...，因为没有下载到源码，所以就根据作者的思考自己写了下。
分析：
窗口A跳转到B窗口，而窗口B下有iframe且其src=C.html，而iframe中让页面C跳转到页面D。如果使用后退按钮，首先是在iframe中页面从D回到C，主窗口没有变化，再继续回退的话，然后是窗口B回到窗口A。
从中我们可以总结到
IE会将iframe的跳转记录在历史记录中，而使用回退，其对应历史记录仅使用在iframe上，可是不会对主窗口进行回退。

如果在最终D页面的情况下不允许再回退跳转了，禁用其后退按钮，推荐下面的解决方案：
在D中引入iframe E 而E中自动跳转f。利用IE对iframe的变化也记录在历史记录的特点，这样在每次回退的时候，都只有iframe E中在变化，而E 又自动跳转F ，这样历史记录又填回IE里面去了，就导致其D不能进行回退。

 //解决IE8~9 浏览器返回键禁止使用兼容问题  

 //第一步在页面D中新建一个iframe，初始化SRC=bank.html
    var createFrame = function (context) {
        if (!('pushState' in history)) {
            var iframe = document.createElement('iframe');
            iframe.src = '../bank.html';
            iframe.style.display = 'none';
            context.appendChild(iframe);
        }
    }
  //第二步 在页面bank.html中，让iframe进行自动跳转
<script>
    var iframe = window.frameElement;
    iframe.src = '../bank1.html'
</script>  
 

备注：
一定要设置iframe.style.display = 'none';让其不显示，这样就可以神不知鬼不觉了。

去除IE自带的输入框清除按钮

代码：
`

input::-ms-clear{
    width : 0;
    height: 0;
}

`

去除button默认样式

`

 border: 0;
 background-color: transparent;
 outline: none;`