资讯专栏INFORMATION COLUMN

#JavaScript# IE兼容

Me_Kun / 2427人阅读

摘要:出现原因在子页面关闭时,会释放掉在子页面中声明赋值的对象。所以在父页面所有对这个对象的引用操作都会产生这个错误。然后在父页面中使用变成对象。

在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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102973.html

相关文章

  • #JavaScript # javascript DOM0和DOM2事件

    摘要:端的是点击,但是移动端把事件当作单击。移动端的是点击事件不是端的点击效果,存在的延迟,项目中我们需要解决这个延迟,使用手指离开处理点击事件。 什么是事件 事件是元素天生具备的行为方式(和写不写JS代码没有关系),当我们去操作元素的时候会触发元素 的很多事件。 事件绑定 1.什么是事件绑定给当前元素的某一个事件绑定方法,目的是为了让当前元素某个事件被触发时,可以做一些事情。2.事件绑定方...

    Salamander 评论0 收藏0
  • 有浏览器的地方就有Fundebug

    摘要:已经全面支持主流浏览器啦对于前端开发者,兼容各种浏览器是一件非常痛苦的事情。并且,同一个错误在不同浏览器下的,,,与都有可能不同。根据我们的初步估算,目前聚合算法能够将的重复错误成功聚合,这样极大地提高了用户分析错误的效率。 Fundebug已经全面支持主流浏览器啦! 对于前端开发者,兼容各种浏览器是一件非常痛苦的事情。在搜索框中输入关键字JavaScript浏览器兼容,结果是这样的:...

    DangoSky 评论0 收藏0
  • 如何机制地回答浏览器兼容性问题

    摘要:前言有过面试经验的同学应该都被问过浏览器兼容性的问题,对于面试官的问题,常常猝不及防,因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧,你对浏览器的兼容性有了解过吗,那么如何才是我们正确回答这个问题的姿势呢。 前言 有过面试经验的同学应该都被问过浏览器兼容性的问题,对于面试官的问题,常常猝不及防,因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧,你对浏览器的兼容性有了解过吗,那么如...

    leanote 评论0 收藏0
  • 如何机制地回答浏览器兼容性问题

    摘要:前言有过面试经验的同学应该都被问过浏览器兼容性的问题,对于面试官的问题,常常猝不及防,因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧,你对浏览器的兼容性有了解过吗,那么如何才是我们正确回答这个问题的姿势呢。 前言 有过面试经验的同学应该都被问过浏览器兼容性的问题,对于面试官的问题,常常猝不及防,因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧,你对浏览器的兼容性有了解过吗,那么如...

    Rindia 评论0 收藏0
  • # Javascript # DOM2兼容处理

    摘要:兼容问题,除了语法上的区别,在处理的机制上也有下列问题顺序问题,重复问题,对象问题。没有进行去重处理。在标准浏览器中在低版本中究其根本,都是低版本浏览器对于它内置事件池处理机制的不完善导致的。 DOM2兼容问题,除了语法上的区别,在处理的机制上也有下列问题:顺序问题,重复问题,this对象问题。 语法问题 [标准]curEle.addEventListener(type, fn, fa...

    fnngj 评论0 收藏0
  • 从html,css,javascript三方面谈谈“浏览器兼容性”的问题

    摘要:可以理解为,在屏幕上通过浏览器窗口所能看到网页内容的高度。都表示浏览器中网页内容的高度,但稍有区别。解决等浏览器不支持标签的问题高版本的浏览器用了低版本的浏览器无法识别的元素,从而导致不能解析。这时候我们就会面临这个兼容性问题。 javaScript 在IE、FireFox、Netscape等不同的浏览器里,对于document.body的clientHeight、offsetHeig...

    William_Sang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<