Angularjs兼容低版本IE
注:AngularJS1.3已经不支持IE8(包括IE8)以下的浏览器。更多信息请查看 我们的Blog 。AngularJS 1.2将继续支持IE8,但核心团队不会花时间去解决IE8或更早的IE浏览器问题。
本文是介绍针对IE浏览器的特征来处理HTML属性和标签。如果你想在IE8或者更早的浏览器的应用中使用AngularJS的话,这篇文章非常适合你。
该项目目前支持IE9+了,并会修复相应的BUG。持续集成服务器在IE9,IE10,和IE11运行所有的测试请看 Travis CI 和 ci.angularjs.org 。
我们没有在IE8及以下浏览器上测试。用AngularJS功能的子集可以工作在这些浏览器,但它是由你来测试和决定是否适用于您的特定的APP。
简单版本
为了能让您的AngularJS应用能正常运行在IE上,请确保如下:
1,你需要为IE7及以下浏览器添加JSON.stringify方法。可以使用 JSON2 或 JSON3。
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<head>
<!--[if lte IE 7]>
<script src="/path/to/json2.js"></script>
<![endif]-->
</head>
<body>
...
</body>
</html>
2,给根元素添加id=”ng-app”属性与ng-app属性结合起来。
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
...
</html
3,不要使用自定义元素标签,比如<ng:view>,使用<div ng-view>来取代。
4,如果你想使用自定义元素标签,你必须在IE8及以下浏览器中添加下面的代码:
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
<head>
<!--[if lte IE 8]><script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view'); // Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');</script><![endif]-->
</head>
<body>
...
</body>
</html>
5,使用ng-style标签来取代style=”{{someCSS}}”。后者能运行在chrome和Firefox,但在IE11及以下浏览器中无法运行(写作时的最新版本)。
最重要的部分:
- xmlns:ng-命名空间-你需要为你所有计划要使用的常见标签创建命名空间。
- document.createElement(yourTagName) -创建自定义的标签名称-因为这个问题只在IE老版本浏览器中存在,所以你只需要有条件的加载它。对于那些不支持命名空间和自定义HTML标签的浏览器,你需要预处理来让它在IE中正常的运行。
长版本
IE中不支持非标准标签的问题,可以分为两种,每种都有相应的解决办法
如果标签名以my:前缀开头,它会被认为是一个XML命名空间,所以必须在<html xmlns:my=”ignored”>进行相应的命名空间声明。
如果标签没有:,但它不是一个标准的HTML标签,那么它必须使用document.createElement(‘my-tag’)预先创建。
如果你计划在自定义标签中使用CSS选择器,那么无论哪个xml命名空间,你必须使用 document . createElement ( ‘my-tag’ ) 来预创建标签
好消息
好消息是,这些限制只适用于元素标记名称,而不是元素的属性名称。因此 <div my-tag your:tag ></div> 在IE中是不需要进行特殊处理的。
如果我不这样做,会发生什么?
如果你的HTML有未知的标签mytag(可能是my:tag或者my-tag类似的)
<html>
<body>
<mytag>some text</mytag>
</body>
</html>
它被解析成下面的DOM结构:
#document+- HTML+- BODY+- mytag+-#text: some text
我们想要的是BODY元素下有一个子元素mytag,mytag里面包含some text文本。 但在IE中不会解析成上面的样子(如果没有进行上面的修复的行为的话)
#document
+- HTML
+- BODY
+- mytag
+-#text: some text
+-/mytag
在IE中,body元素中有三个子元素:
1,自闭标签。比如自闭标签<br/>,标签中/是可选的,但<br>标签不允许有子元素,所以浏览器会认为是三个兄弟元素,而不是把some text作为<br>的子元素。
2,作为some text的文本节点。应该作为mytag的子元素,而不是兄弟元素。
3,损坏的自闭合标签/mytag。它是不规范的,因为元素名称不允许有/字符。此外,该自闭合标签不应该成为DOM的一部分,因为它仅用于绘制DOM的结构。
自定义标签中的CSS样式
为了能使CSS选择器能在自定义元素中工作,无论在XML命名空间,你必须使用 document . createElement ( ‘my-tag’ ) 来预创建自定义标签名
<html xmlns:ng="needed for ng: namespace">
<head>
<!--[if lte IE 8]>
<script>
// needed to make ng-include parse properly
document.createElement('ng-include'); // needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<style>
ng\:view {
display: block;
border:1px solid red;
}
ng-include {
display: block;
border:1px solid blue;
}
</style>
</head>
<body>
<ng:view></ng:view>
<ng-include></ng-include>
...
</body>
</html>
源引:https://docs.angularjs.org/guide/ie
Angularjs兼容低版本IE相关推荐
- android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下,另行实现圆形scale动画...
ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...
- 解决 Visual Studio 2017 RC 不兼容低版本 Visual Studio 创建的 MVC 4 项目的问题
解决 Visual Studio 2017 RC 不兼容低版本 Visual Studio 创建的 MVC 4 项目的问题 参考文章: (1)解决 Visual Studio 2017 RC 不兼容低 ...
- Android开发之解决NestedScrollView滑动监听兼容低版本的方法
NestedScrollView的滑动监听目前仅限api23及以上,为了兼容低版本如下自定义方法 可以自定义NestedScrollView即可如下: package cn.net.gfan.worl ...
- [css] 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢?
[css] 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢? 理解:在不同系统,不同设备,不同尺寸的界面,有良好的用户体验,舒适的阅读体验,交互体验. 原理:根据不同设 ...
- android 沉浸式状态栏 兼容低版本,详解Android沉浸式实现兼容解决办法
自android5.0开始,沉浸式状态栏似乎成为一种潮流,应用里缺少沉浸式总感觉少些什么.于是乎,我开始到处找如何兼容低版本的沉浸式,由于Android平台跨度问题,总遇到一些不如人意的问题.终于,皇 ...
- vue 检测ie版本_Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...
- 3dmax高版本转低版本插件_Fundebug前端JavaScript插件更新至1.8.0,兼容低版本的Android浏览器...
兼容低版本Android浏览器,请大家及时更新. Fundebug前端BUG监控服务 Fundebug是专业的程序BUG监控平台,我们JavaScript插件可以提供全方位的BUG监控,可以帮助开发者 ...
- React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 参考文章: (1)React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 (2)https://www.cnbl ...
- element ui 兼容低版本浏览器
基于ES6的用Vue框架element ui写的页面,如果当需要解决兼容低版本浏览器时,会遇到在低版本浏览器中不显示效果,页面一片空白,但控制台也不报错,而在高版本可以正常显示的情况. 低版本效果: ...
最新文章
- LeetCode House Robber II(动态规划)
- intellij idea 显示打开文件路径按钮
- task文件服务器无法输入,Win10系统无法启动task scheduler服务的解决方法
- Nginx+Tomcat windows环境下简单集群搭建
- 荷兰警方错买300万欧元Office套件 法院:微软无需退款
- python基础教程--代码集合(下)
- P3166-[CQOI2014]数三角形【GCD】
- ORACLE1.21 PLSQL 01
- Skip-Thought Vector —— 跳跃思维句表示
- 虚拟机网络驱动(共享文件夹)不见了的解决方案-适用于win7~win10 and Windows Server 2008~Windows Server 2012R2
- 一个很好的开源图像处理软件--imageJ (2
- mysql自带的管理工具_mysql几个管理工具推荐
- 原创精美微信小程序UI界面——抖音版的“知乎”来啦
- Flink 开发环境部署和配置
- python 模块相互import
- shell之数学运算
- Dubbo,入门Demo案列使用,框架原理,Zookeeper的使用,安装监控中心和管理控制台,service,provider,comsumer三个项目的Demo
- WebIDE 使用指南
- 恰当的活法――有感于《杜拉拉升职记》
- 基于粒子群算法的微电网优化调度应用研究(三、长短期记忆网络和卷积神经网络预测模型)
热门文章
- 计算机基本概念反思,计算机基础教学反思
- 银行安防视频监控系统设计
- MacBook Pro无法开机的解法办法
- 零基28岁自学python入坑ing
- 实验:通过MUX-vlan实现vlan隔离
- c语言文件压缩怎么求压缩比,文件压缩C语言程序设计报告.doc
- 加州大学欧文分校计算机排名,加州大学欧文分校计算机工程硕士排名第30(2020年TFE Times排名)...
- python计算多边形的面积并保留两位小数_Python计算任意多边形面积算法
- 压敏电阻MOV特性及选用
- HRBUST-1022 JiaoZhu and SC(C语言)