热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

测试IE浏览器对JavaScript的AngularJS的兼容性

这篇文章主要介绍了测试IE浏览器对JavaScript的AngularJS的兼容性的方法,尽管随着Windows10的近期上市,IE浏览器即将成为历史需要的朋友可以参考下

短版本

为确保Angular应用在IE上能够工作请确认:

1. 在IE7或更早的版本上polyfill JSON.stringify。你可以使用JSON2或JSON3来polyfills。
 


 
  
   
  
  
   ...
  
 

2. 在连接处将id="ng-app"添加到根元素,使用ng-app属性
 


 
  ...
 

3. 你不能使用自定义的元素标记,像(使用属性版本

来代替),或

4. 如果你必需要用自定义元素标记,然后你必须采取以下步骤以确保IE8及之前版本都能用:
 


 
  
   
  
  
   ...
  
 

5. 使用ng-style标记来替代。后续的版本能够在Chrome和Firefox下工作但不能在IE版本<=11下工作(在撰写本文时的最新版本)。


重要部分是:

  •     xmlns:ng- 命名空间- 你需要为每一个自定义标签指定一个命名空间。
  •     document.createElement(yourTagName)- 创建自定义标签名 - 因为这只是对旧版本IE的问题,所以你需要指定加载条件。对于每一个没有命名空间并且在HTML中没有定义的标签,你需要提前声明以使得IE识别。

版本信息

IE对非标准的标签元素有很多问题。这些问题可以归为两大类别,每一类别都有自己的解决办法。

  •     如果标签名以my:开头那么他会被当做XML命名空间并且必须有对应的命名空间声明
  •     如果标签没有:符号但是不是标准HTML标签,那么必须提前使用document.createElement('my-tag')创建。
  •     如果你计划用CSS选择器改变自定义标签的样式,那么不管有没有命名空间你都得提前用document.createElement('my-tag')创建.


好消息

好消息是这些限制仅仅适用于元素标记名称并不适用于元素属性名称。因此,在IE中并不需要特别的处理:


如果我不这样做,会发生什么?

假如你使用HTML的未知标记mytag(my:tag或者my-tag结果是相同的):

 

  
   some text
  
 

 

应该解析出如下的DOM:
 

#document
 +- HTML
   +- BODY
    +- mytag
      +- #text: some text

预期的行为是BODY元素有一个mytag子元素,它带有一些文字。

但是在IE中不是这样的(如果没有包含上面的修订)
 

#document
 +- HTML
   +- BODY
    +- mytag
    +- #text: some text
    +- /mytag

在IE中,BODY元素有三个子元素:

1,一个自关闭的mytag。例如自关闭标签
。/是可选的,但是
标签是不允许有子元素的,浏览器将
some text
视为三个同辈的标签,而some text并不是
的子元素。

2,一个文本节点some text。在上面这应该是mytag的子元素,而不是同辈标签

3.一个损坏的自关闭的/mytag。这是一个损坏的元素因为元素名称是不允许带/字符的。另外,这种子关闭的元素并不是DOM的一部分,它仅仅是用于描述DOM的结构。

CSS风格的自定义标记命名

为确保CSS选择器能够在自定义元素上工作,自定义元素的名称必须预先使用document.createElement('my-tag')创建,不需顾虑XML的命名空间。
 


  
   
   
  
  
   
   
   ...
  
 


推荐阅读
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • 在Android中解析Gson解析json数据是很方便快捷的,可以直接将json数据解析成java对象或者集合。使用Gson解析json成对象时,默认将json里对应字段的值解析到java对象里对应字段的属性里面。然而,当我们自己定义的java对象里的属性名与json里的字段名不一样时,我们可以使用@SerializedName注解来将对象里的属性跟json里字段对应值匹配起来。本文介绍了使用@SerializedName注解解析json数据的方法,并给出了具体的使用示例。 ... [详细]
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • ECMA262规定typeof操作符的返回值和instanceof的使用方法
    本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]
  • 使用chrome编辑器实现网页截图功能的方法
    本文介绍了在chrome浏览器中使用编辑器实现网页截图功能的方法。通过在地址栏中输入特定命令,打开控制台并调用命令面板,用户可以方便地进行网页截图操作。 ... [详细]
  • 本文介绍了网页播放视频的三种实现方式,分别是使用html5的video标签、使用flash来播放以及使用object标签。其中,推荐使用html5的video标签来简单播放视频,但有些老的浏览器不支持html5。另外,还可以使用flash来播放视频,需要使用object标签。 ... [详细]
  • express工程中的json调用方法
    本文介绍了在express工程中如何调用json数据,包括建立app.js文件、创建数据接口以及获取全部数据和typeid为1的数据的方法。 ... [详细]
author-avatar
盎然茗嘉
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有