How do I get alternate style sheets to work on iOS5 Safari?
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.l开发者_高级运维og('The theme should be changing to : ' + a.title);
}
}
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);
}
精彩评论