IT教程 | 加入收藏 | 简体 | 繁体
浏览器兼容:Html教程Css教程浏览器兼容手机HtmlBootstrap
当前位置: 首页 > Html+Css > 浏览器兼容

IE9及以上版本JS(javascript)兼容变更讲解

2014-03-21来源:[www.121ask.com]热度:0℃ 【字体:

IE9及以上版本JS兼容变更讲解:

IE9 Beta版发布已经有一段时间了,我们一直在聆听大家对IE9的各种声音,在使用IE9 Beta时发现的不兼容性问题以及您对问题的想法和判断。

IE9新增了许多功能,但同时也影响了很多网站,很多网站与IE出现了不兼容的问题,同时也让很多朋友出现了困惑。

知道IE9为何不支持XP吗?因为XP不过是一个被淘汰的系统,已经严重制约了硬件的性能,现在硬件厂商已经不在为XP做驱动,随着XP系统支持的硬件越来越少,自然用的人也会越来越少,微软自然不会为了一个已经要消亡的系统刻意开发软体,是9X系列将微软走近了千家万户,而XP又是微软的巅峰制作,但XP已经诞生整整十年了,十年前用什么硬件,现在用什么硬件,今非昔比了 按照正常的速度,一般来说一个具有跨时代意义的系统推出5年左右,才会全面淘汰前一个跨时代意义的系统,应该是一个规律了把

IE浏览器这15年 回顾四大版本发展
8月月16日是IE浏览器发布的15周年庆日,不经意间IE已经陪我们走过了15个风风雨雨。这15间IE浏览器经历了最辉煌的时刻,但也遇到了不少曲折和坎坷,例如IE曾将垄断浏览器市场的网景Navigator完全排挤出这个市场,使得IE浏览器占据了全球95%以上的市场份额,为此成为全球最优秀的浏览器。IE6也因出现大量安全漏洞而被称为最遭憎恨的浏览器之一。不过,这款浏览器仍然是全球最受欢迎的浏览器。相信微软当年的开发人员在Win95系统中加入IE时一定没有想到,这款软件竟然改变了人们浏览互联网的方式。以下是一些珍贵的历史图像,让我们一起回味IE浏览器这青涩的历史吧。

IE6.0

2001微软发布了最具里程碑意义的IE6.0浏览器,也是在这个时候,微软似为其浏览器选定了正确的方向。而且与WindowsXP的黄金组合统治了互联网多年,在到2004年市场份额达到了历史最高点的95%。如今微软通过种种措施来鼓励用户放弃IE6.0,升级IE浏览器至最新的版本。IE6浏览器的发展史

IE7.0

2006年IE7.0发布,微软软受到来自MozillaFirefox的竞争压力,在IE7.0发布时,Firefox2.0也问世了,值得一提的是,IE7.0首次独立于操作系统作为一款应用程序存在。

IE8.0

2009年,备受争议的IE8.0浏览器发布,按照微软的说法,IE8.0是当前全球增长最快和最受欢迎的一款浏览器。

IE9.0

IE9.0,万众瞩目的一款浏览器,包含用户对新一代IE浏览器的完美期待,也包含微软对IE浏览器从新崛起的期盼。

[NextPage]
IE9新增了许多功能,但同时也影响了很多网站,很多网站与IE出现了不兼容的问题,同时也让很多朋友出现了困惑。

IE8-IE9更新
1. createElement 方法中不允许使用尖括号<> 。
MSDN原文:Angle Brackets Are Not Allowed in the createElement Method.


所属分类 版本更新
Javascript and DOM IE8-IE9

具体描述及示例:
IE9不能识别createElement方法内的角括弧(< >)。如果您在IE9 的页面中使用角括弧,会发生异常。

Windows IE 9 does not recognize angle brackets (< >) within the createElement method. If you use angle brackets in IE 9 webpages that are not set to previous Windows IE Standards document modes, an exception occurs. For example, the following code example will cause an exception in IE9 mode.

例如,下面的例子在IE9 模式中引发异常。
var el=document.createElement("<div id='myDiv'>");


解决方案及正确写法:
要顺应IE9 中的这项变更有两种方法:
1. 使用setAttribute API 建立元素并分别新增属性,如下面的代码范例所示。
var elm = document.createElement("div");
elm.setAttribute("id","myDiv");

2. 使用innerHTML API 在父元素内建立元素,如下面的代码范例所示。
var parent=document.createElement("div");
parent.innerHTML="<div id='myDiv'></div>";
var elm=parent.firstChild;
或者,也可以将网页设定为IE9 以前的文件模式。

[NextPage]相关资源:

2. IE9 标准模式不支持arguments.caller 属性。
MSDN原文:IE9 Standards Mode Does Not Support the arguments.caller Property.

所属分类 版本更新
Javascript and DOM IE8-IE9

具体描述及示例:
IE9 标准模式中不再支持arguments.caller 属性。

当建立argument objects时,在IE8 和Quirks 中的所有模式,以及IE9 的IE7 标准和IE8 标准模式,都会建立一个名为“caller” 的属性。此caller 属性会储存对呼叫它的函数的argument Object参照。

When argument objects are created, in all modes of IE8 and Quirks, IE7 Standards, and IE8 Standards modes of IE9, a property with the name “caller” is created. This caller property stores the reference to the argument object of the function that called it.

在下例中,IE8 和Quirks 中的所有文件模式,以及IE9 的IE7 标准和IE8 标准文件模式会传回“1”。 IE9 标准模式会发出「Object为null 或未经定义」的错误。

In the following example, all document modes in IE8 and Quirks, IE7 standards, and IE8 standards document modes in IE9 return “1”. IE9 standards mode issues the script error “object is null or undefined”.

function alertCallerLength()
{
alert(arguments.caller.length);
}
function callingFunction()
{
alertCallerLength();
}
callingFunction(1);

解决方案及正确写法:
停用用此属性即可。

相关资源:

3. 不再支持使用不带“.call”或“.bind”的函数指针调用方法。
MSDN原文:Calling a Method with a Function Pointer without ".call" or ".bind"
所属分类 版本更新
Javascript and DOM IE8-IE9

具体描述及示例:
旧版IE中,为了使JavaScript 代码更加精简,常见的做法是将常用的方法储存为变量,然后将该变量替代该方法来使用:

var d = document.writeln;
d("<script language=VBScript>");

在IE9 中,需要有Object才能调用方法。window对象预设是在全域范围内提供(比如在上例中)。但是window对象并没有"writeln" 的方法,因此会报告JavaScript「call Object无效」的错误信息。

Previous versions of Internet Explorer supported caching a pointer to a method and then using the cached pointer to call the method. This support was removed in Internet Explorer 9 in order to increase interoperability with other browsers.

A common practice on webpages targeting older versions of IE was to save common methods to a variable and use that variable as a proxy for the method in order to make JavaScript code more compact:

var d = document.writeln;
d("<script language=VBScript>");

In IE9, an object is required in order to invoke the method. By default the "window" object is provided in global scope (such as in the previous example). However, the "window" object does not have a method "writeln" and so the JavaScript error message "Invalid calling object" is reported.

解决方案及正确写法:
简单解决此问题的方法是使用"call" 方法(所有函数的属性) 明确提供适当的呼叫Object:

d.call(document, "<script language=VBScript>");

长期解决此问题的方法是使用JavaScript 的"bind" API,建立隐含的呼叫Object与方法的关联。方法如下(同样是取自上例):

var d = document.writeln.bind(document);
d("<script language=VBScript>"); // Now this is OK

原文:
Now you must specify the target for the method call just as you do in all other browsers. So while this code works in IE8 and earlier:

var d = document.writeln;
d("<script language=VBScript>");

Now it fails in IE9 just as it fails in all other browsers. An easy fix for this issue is to use the "call" method (a property of all functions) to explicitly provide the appropriate calling object:

d.call(document, "<script language=VBScript>");

The long term fix for this is to use JavaScript's "bind" API to associate an implicit calling object with the method. This is done as follows (again, drawing on the previous example):

var d = document.writeln.bind(document);
d("<script language=VBScript>"); // Now this is OK

相关资源:

[NextPage]
4. 不再连接内容属性和 DOM expando。
MSDN原文:Content Attributes and DOM Expandos Are No Longer Connected.

所属分类 版本更新
Javascript and DOM IE8-IE9

具体描述及示例:

例如:
<div id="myElement" class="b" myAttr="custom"></div>

在下面的范例中,'id' 和'className' 都是预先定义的属性:
var div = document.getElementById("myElement");
var divId = div.id; // Gets the value of the id content attribute
var divClass = div.className; // Gets the value of the class content attribute

在IE8 和之前的版本中,'myAttr' 内容属性的存在等于暗示'myAttr' DOM expando 的存在:
var divExpando = div.myAttr; // divExpando would get the value "custom" in IE8

IE9 中的突破性变更是使用者定义的内容属性将不再暗指DOM expando。
var divExpando = div.myAttr; // divExpando would get an undefined value

In past versions of Internet Explorer, content attributes were represented on JavaScript objects as DOM expandos. In Internet Explorer 9, this link between content attributes and DOM expandos has been severed in order to increase interoperability between IE and other browsers.
 
A content attribute is an attribute that is specified in the HTML source, for example, <element attribute1="value" attribute2="value">. Many content attributes are predefined as part of HTML; HTML also supports additional user-defined content attributes.
 
DOM expandos are the values that can be retrieved from an object in JavaScript, for example, document.all["myelement"].domExpando. Most objects have a predefined set of properties that typically represent the value of their same-named content attribute. JavaScript supports additional user-defined properties as well.

解决方案及正确写法:
在JavaScript 代码中几乎无法直接在失败点看出此问题。而往往是在应用时才会看到失败的情形。

若要修正此问题,请使用'getAttribute'来获取使用者定义的内容属性值。建议对所有IE 版本采取此因应措施。例如(根据上个范例):

不要使用:
var divExpando = div.myAttr;

而改用:
var divExpando = div.getAttribute("myAttr");

相关资源:

5. JavaScript 属性列举在IE9 中不同。

MSDN原文:JavaScript Property Enumeration Differs in Internet Explorer 9

所属分类 版本更新
Javascript and DOM IE8-IE9

具体描述及示例:
由于IE9 的JavaScript Object模型中所做的变更,JavaScript 属性的列举方式跟在IE8 中可能不太一样。

Due to the changes made in the JavaScript object model of Internet Explorer 9, JavaScript properties may be enumerated differently from how they are enumerated in Internet Explorer 8.

当在任何文件模式内使用for… 陈述式时,属性列举的顺序可能与IE8 传回的顺序不同。例如,数值属性现在是列举在非数值属性之前。下例说明IE8 与IE9 之间的列举顺序的差异:

When using the for…in Statement, in any document mode, the order of property enumerations may be different from the order returned by Internet Explorer 8. For example, numeric properties now enumerate before non-numeric properties. The following sample illustrates the difference in enumeration order between Internet Explorer 8 and Internet Explorer 9:

var obj = {first : "prop1", second: "prop2", 3: "prop3"};

var s = "";
for (var key in obj) {
    s += key + ": " + obj[key] + " ";
}
document.write (s);

在IE8 和IE9 中执行此范例会输出下列结果:

IE8:first: prop1 second: prop2 3: prop3
IE9:3: prop3 first: prop1 second: prop2

IE8 并不包含与原型物件的内建属性同名的属性列举。 IE9 中的所有文件模式

以上IT文章《IE9及以上版本JS(javascript)兼容变更讲解》由名客技术网[www.121ask.com]提供阅读!
推广信息
推广信息
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3