javascript - 如果在 iOS 7 上的 "capable"webapp 中,则向 <body> 添加一个类

标签 javascript html css angularjs

我正在使用 AngularJS 和 Ionic 框架为 iOS 7 开发一个网络应用程序。 只有当页面从添加到主页的 web 应用程序(我设置为 apple-mobile-web-app-capable yes)加载页面时,我才会向 body DOM 元素添加一个类。

我正在尝试这样做:在头部末尾添加这个 javascript

if(("standalone" in window.navigator) && window.navigator.standalone){
  $(".body").addClass("platform-ios7")
}

但它不起作用。 最好的方法是什么? 我知道 AngularJS 有 ng-sstyle、表达式和过滤器,可以用 angular 实现吗?

提前致谢:)

最佳答案

如果您不需要知道它是否是应用程序代码中任何地方的 IOS 主屏幕(因此不需要在任何 Controller 或服务中),并且您纯粹出于 CSS 原因想要这个类,那么我认为小的自定义指令是要走的路。

app.directive('iosDetect', function($window) {
  return {
    link: function (scope, iElement, iAttrs, controller, transcludeFn) {
      if(('standalone' in $window.navigator) && $window.navigator.standalone) {
        iElement.addClass('platform-ios7');
      }
    }
  };
});

然后您可以在 body 元素(或任何元素)上使用它:

<body ios-detect>

你可以看到下面的plunkr作为例子

http://plnkr.co/edit/zCPOUSLeykjsCmsfuxtR?p=preview

关于javascript - 如果在 iOS 7 上的 "capable"webapp 中,则向 <body> 添加一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20463637/

相关文章:

javascript - 如何检查数组中是否存在对象

javascript - 动态插入的 CSS(通过链接)在框架加载后应用

html - Firefox <a download> 问题

html - 从另一个页面链接到一个页面的一部分

html - 强制在 Jekyll 中使用绝对 URL

jquery - 动画宽度 : content goes out when width zero

javascript - 如何让我的网页在所有浏览器中使用相同的布局?

javascript - 从 SELECT 中删除只读属性

css - Angular 2 绑定(bind)所有样式

html - 居中空div