如何让备用样式表在 iOS5 Safari 上工作?

发布于 2024-11-17 20:55:31 字数 599 浏览 4 评论 0原文

我一直在为 iPad 开发 HTML5 应用程序。该应用程序的一部分包括使用替代样式表。这在 iOS 4 Safari 上运行良好,在我的桌面上的 Safari 上也运行良好。然而,我刚刚将其中一台 iPad 升级到 iOS 5 beta,它就不再工作了。有什么想法吗?

这是我的代码。

function (options) {
    var i, a, main;
    for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.rel.indexOf("style") != -1
        && a.title) {
            a.disabled = true;
            if (a.title == options.title) {
                a.disabled = false;
                console.log('The theme should be changing to : ' + a.title);                    
            }
        }

I have been working on a HTML5 app for the iPad. Part of the app includes using alternative style sheets. This worked great on iOS 4 Safari and works fine on Safari on my desktop. However, I just upgraded one of our iPads to iOS 5 beta and it no longer works. Any ideas?

Here is my code for this.

function (options) {
    var i, a, main;
    for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.rel.indexOf("style") != -1
        && a.title) {
            a.disabled = true;
            if (a.title == options.title) {
                a.disabled = false;
                console.log('The theme should be changing to : ' + a.title);                    
            }
        }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

日暮斜阳 2024-11-24 20:55:31

在搜索 SO 和网络后,我对任何解决方案都不满意。所以我想出了一个新的解决方案,它可以在 chrome、ff、ie 和 safari 以及旧 ipad 上的 safari 中工作:

首先设置样式:

<link rel="stylesheet"              href="./codebase/touchui.css"       data-title="default"        type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/ios.css"           data-title="ios"                type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/jq.css"            data-title="jq"                 type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/sky.css"           data-title="sky"                type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/green.css"         data-title="green"          type="text/css" media="screen" charset="utf-8">

注意属性“data-title”,这是一个用户定义的属性。

然后使用这个函数来更改样式表,(请注意,我已将其设置在应用程序范围内,您可以将其设为标准函数:

app = {}

app.styleSet=function(title) {
  var i, a
  var o;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) 
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute('data-title') ) {
      if (a.getAttribute('data-title') == title) 
        o = a

      a.setAttribute("rel", "alternate stylesheet"); 
      a.setAttribute("title", a.getAttribute('data-title'));
      a.disabled = true
  }

  o.setAttribute("title", undefined); 
  o.setAttribute("rel", "stylesheet"); 
  o.disabled = false
  //app.cookieCreate("style", title, 365);
}

After searching SO and the web, I was not happy with any of the solutions. So I came up with a new solution which is working in chrome, ff, ie and safari and safari on an old ipad:

First set styles:

<link rel="stylesheet"              href="./codebase/touchui.css"       data-title="default"        type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/ios.css"           data-title="ios"                type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/jq.css"            data-title="jq"                 type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/sky.css"           data-title="sky"                type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/green.css"         data-title="green"          type="text/css" media="screen" charset="utf-8">

Notice the attribute "data-title" this is a user-defined attribute.

Then use this function to change the style sheet, (note that I have it set in the app scope, you can make it a standard function:

app = {}

app.styleSet=function(title) {
  var i, a
  var o;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) 
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute('data-title') ) {
      if (a.getAttribute('data-title') == title) 
        o = a

      a.setAttribute("rel", "alternate stylesheet"); 
      a.setAttribute("title", a.getAttribute('data-title'));
      a.disabled = true
  }

  o.setAttribute("title", undefined); 
  o.setAttribute("rel", "stylesheet"); 
  o.disabled = false
  //app.cookieCreate("style", title, 365);
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文