html+按钮ie兼容,#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:该操作的目标元件无效

问题出现背景：

IE6-IE9使用innerHTML进行赋值.

问题出现原因：

在IE6-IE9中对Table使用innerHTML时出现的问题。例如：

在JS中我们这么操作他，

document.getElementById('table').innerHTML = '

demo'

就回出现上面的问题。

问题解决方法有三种：

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

tbody.appendChild = "

"

第二：添加判断

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 = "

";

}else{

tbody.innerHTML = "

";

}

第三：包装整个table

var 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

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进行自动跳转

var iframe = window.frameElement;

iframe.src = '../bank1.html'

备注：

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

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

代码：

`

input::-ms-clear{

width : 0;

height: 0;

}

`

去除button默认样式

`

border: 0;

background-color: transparent;

outline: none;`