Как получить альтернативные таблицы стилей для работы на iOS5 Safari? - PullRequest
Новая
       2

Как получить альтернативные таблицы стилей для работы на iOS5 Safari?

1 голос
/ 01 июля 2011

Я работаю над приложением HTML5 для iPad.Часть приложения включает в себя использование альтернативных таблиц стилей.Это отлично работает на iOS 4 Safari и отлично работает на Safari на моем рабочем столе.Однако я только что обновил один из наших iPad до бета-версии iOS 5, и он больше не работает.Есть идеи?

Вот мой код для этого. 

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);                    
            }
        }

1 Ответ

0 голосов
/ 03 августа 2013

После поиска в SO и в Интернете меня не порадовало ни одно из решений. Поэтому я предложил новое решение, которое работает в chrome, ff, т.е. и safari и safari на старом ipad:

Первый набор стилей: 

<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);
}
...