`

AngularJS的IE浏览器兼容性

阅读更多

一.概览
        如果你要让你的AngularJS应用兼容IE8和IE8以下的版本的话,你需要做一些特殊处理。

 

二.简易版

要让你的AngularJS应用在IE中正常运行你必须:

    a.确保JSON字符串能被正常解析(IE7需要),你可以使用JSON2或者JSON3来实现。
    b.不能使用自定义的元素标签,如<ng:view>(你只能使用属性的形式,如<div ng-view>)

或者
    c.如果你用了自定义的标签名,那你必须按照以下步骤做才能保证IE正常运行:

<htmlxmlns:ng="http://angularjs.org"><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>

        其中重要的部分是:
        xmlns:ng:命名空间,你需要为你使用或者准备使用的每一个自定义标签准备一个命名空间。
        document.createElement(你的标签名) :自定义标签的创建,因为这只是老版本IE的一个问题,所以你需要根据情况使用。对于每一个你没有使用命名空间或者HTML中没有定义的标签,你需要预先声明它彩色能使IE正常工作。

 

三.详细版
IE处理非标准标签名会产生问题。问题可以分为两类,每类都有自己的解决方法。
    a.如果标签名是以my:前缀开始的: 这会被当成是一个XML的命名空间,并且必须使用`来声明。
    b.如果标签没有:符号,但它又不是一个标准的HTML标签。那么就必须预先使用document.createElement('my-tag')来创建它。
    c.如果你准备使用css选择器来对自定义标签添加样式,那么你就必须先用document.createElement('my-tag')来创建一下,不管有没有XML命名空间。

分享到:
评论

相关推荐

    解决IE浏览器兼容问题

    总的来说,解决IE浏览器兼容问题需要全面了解其版本特性,利用特性检测和polyfill来填补兼容性差距,同时结合测试工具进行验证。虽然现代浏览器已经逐渐取代IE,但在某些企业环境中,IE仍然占有一定份额,因此理解并...

    angularjs兼容性测试IE7

    7. **测试工具**:为了进行兼容性测试,可以使用像IE Tester这样的工具,模拟不同版本的IE浏览器,或者利用BrowserStack、Sauce Labs等在线服务进行真实环境的跨浏览器测试。 8. **错误处理与调试**:在IE7上运行...

    AngularJs IE Compatibility 兼容老版本IE

    关于AngularJs与IE浏览器的兼容性问题,尤其是老版本的IE如IE8等,已经成为了许多前端开发者的头痛之事。AngularJs是一个非常流行的前端框架,但是由于IE浏览器的老旧特性,导致它在处理AngularJs创建的自定义标签和...

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

    标题中提到的知识点是“测试IE浏览器对JavaScript的AngularJS的兼容性”。描述中指出尽管Windows10上市后IE浏览器的地位将会下降,但仍有一部分用户需要了解如何测试IE对AngularJS的兼容性。标签“IE JavaScript”...

    angularjs 兼容js

    总的来说,为了使AngularJS在IE浏览器中运行,开发者需要确保引入这些兼容性库,并正确配置它们的加载顺序。同时,也要注意这些库可能带来的性能影响,因为它们会增加页面的加载时间和内存占用。随着现代浏览器的...

    AngularJS笔记

    为了确保跨浏览器兼容性,尤其是与IE浏览器的兼容性,可能需要在`&lt;html&gt;`标签中添加XML命名空间`xmlns:ng="http://angularjs.org"`,尽管这不是最佳实践,但可确保在IE中使用老派风格的`ng:`前缀。 #### 二、...

    AngularJS学习笔记

    对于IE浏览器,AngularJS支持IE8及以上版本。 总的来说,这份AngularJS学习笔记不仅为初学者提供了入门示例,也深入到高级主题,例如自定义指令和模块化,帮助开发者全面掌握AngularJS的使用方法和最佳实践。通过这...

    AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

    - `-ms-filter` 属性用于IE浏览器的透明度设置。 - `filter` 属性也用于IE浏览器的透明度设置。 这些CSS属性在IE8中用来替代标准的`opacity`属性。 ### 4. HTML和CSS布局 示例中的矩形框布局使用了绝对定位和相对...

    JavaScript实现IE菜单功能

    JavaScript是Web开发中不可或缺的一部分,尤其在实现交互性功能时发挥着关键作用。...因此,对于跨浏览器兼容性,建议使用更通用的JavaScript库或框架,如jQuery或AngularJS,以及HTML5的Web API来实现类似功能。

    IE树控件IE树控件IE树控件

    10. **跨浏览器兼容性**:由于IE浏览器的市场份额逐渐减小,开发者在实现IE树控件时,还需要考虑与现代浏览器(如Chrome、Firefox、Edge)的兼容性。 通过以上知识点的学习和实践,开发者可以有效地创建和维护功能...

    angularjs中回车键触发某一事件的方法

    在IE浏览器中使用window.event.keyCode,而在Firefox或Safari中使用event.which。 d) 最后,在ng-keyup中调用的函数内部,根据键码值判断是否为回车键,如果是,则执行需要触发的事件或方法,如上面示例中的$scope....

    jquery.qrcode.js

    考虑到旧版IE浏览器不支持Canvas,该插件采用纯HTML和CSS的方式生成二维码,确保在各种浏览器环境下都能正常工作。 2. **简单易用**:只需要引入jQuery库和`jquery.qrcode.js` 文件,通过简单的jQuery选择器和参数...

    神思100型web控件

    由于基于ActiveX,神思100型Web控件可能受到浏览器兼容性限制,特别是对于非IE浏览器(如Chrome、Firefox、Safari等)。同时,ActiveX控件的安全性相对较低,可能会引发潜在的安全风险,因此在使用时应确保用户环境...

    AngularJS初始化过程分析(引导程序)

    在使用ng-app指令时,如果需要在IE浏览器下正常工作,还需要在标签中添加xml-namespace前缀(例如ng:),这是因为历史原因导致的兼容性问题。不过,AngularJS官方文档中明确表示不推荐继续使用这种旧版语法。 五、...

    IEWebControls

    IEWebControls通常用于ASP.NET框架,它使得在IE浏览器上创建功能强大的Web界面变得更加简单。 在"IEWebControls.exe"这个文件中,我们可以推测这可能是一个安装程序或者包含了一系列的Web控件。执行这个文件,...

    浅谈firefox 的event事件处理

    比如,在IE浏览器中,事件对象作为`window.event`的属性,而在遵守W3C标准的浏览器(包括Firefox)中,则需要通过事件处理函数的参数传入`event`对象。这意味着开发者在编写跨浏览器兼容的代码时,需要特别注意这...

    iewebcontrols

    此外,随着现代浏览器对ActiveX的支持逐渐减少,iewebcontrols在非IE浏览器中的可用性也受到了限制。 **总结** iewebcontrols控件是为Web开发提供的一个强大工具,它简化了复杂界面的创建,提高了用户体验。然而,...

    AngularJS中指令的四种基本形式实例分析

    由于旧版的IE浏览器(尤其是IE8)不支持自定义元素,因此通常推荐使用属性或类指令来确保兼容性。在示例的HTML结构中,可以看到`ng-app`被用作一个属性指令,用来启动Angular应用。 总结来说,AngularJS的指令系统...

    AmazeUI后台前端框架

    在兼容性方面,AmazeUI致力于支持主流浏览器,包括Chrome、Firefox、Safari、Edge以及旧版本的IE浏览器,以覆盖最广泛的用户群体。其代码经过优化,可以在低性能设备上顺畅运行,降低了对硬件的要求。 AmazeUI还...

Global site tag (gtag.js) - Google Analytics