在iPhone上的UIWebView中即时更改CSS [英] Changing CSS on the fly in a UIWebView on iPhone
问题描述
假设我正在开发一个iPhone应用程序，这是一个汽车目录。用户将从列表中选择一辆汽车，我将提供汽车的详细视图，这将描述如最高速度的东西。详细视图本质上是加载现有HTML文件的 UIWebView 。
Let's say I'm developing an iPhone app that is a catalogue of cars. The user will choose a car from a list, and I will present a detail view for the car, which will describe things like top speed. The detail view will essentially be a UIWebView that is loading an existing HTML file.
不同的用户将生活在不同的部分的世界，所以他们会喜欢看到车的最高速度在任何单位是适合他们的地方。假设有两个这样的单位：SI（km / h）和常规（mph）。还让我们说用户可以通过点击屏幕上的按钮来改变显示单位;
Different users will live in different parts of the world, so they will like to see the top speed for the car in whatever units are appropriate for their locale. Let's say there are two such units: SI (km/h) and conventional (mph). Let's also say the user will be able to change the display units by hitting a button on the screen; when that happens, the detail screen should switch to show the relevant units.
到目前为止，我已经做了很多尝试来解决这个问题。
So far, here's what I've done to try and solve this.
HTML可能如下所示：
The HTML might look something like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Some Car</title>
<link rel="stylesheet" media="screen" type="text/css" href="persistent.css" />
<link rel="alternate stylesheet" media="screen" type="text/css" href="si.css" title="si" />
<link rel="alternate stylesheet" media="screen" type="text/css" href="conventional.css" title="conventional" />
<script type="text/javascript" src="switch.js"></script>
</head>
<body>
<h1>Some Car</h1>
<div id="si">
<h2>Top Speed: 160 km/h</h2>
</div>
<div id="conventional">
<h2>Top Speed: 100 mph</h2>
</div>
</body>
持久样式表persistent.css：
The peristent stylesheet, persistent.css:
#si
{
display:none;
}
#conventional
{
display:none;
}
第一个备用样式表si.css：
The first alternate stylesheet, si.css:
#si
{
display:inline;
}
#conventional
{
display:none;
}
第二个备用样式表，conventional.css：
And the second alternate stylesheet, conventional.css:
#si
{
display:none;
}
#conventional
{
display:inline;
}
基于教程在A List Apart，我的switch.js看起来像这样：
Based on a tutorial at A List Apart, my switch.js looks something like this:
function disableStyleSheet(title)
{
var i, a;
for (i = 0; (a = document.getElementsByTagName("link")[i]); i++)
{
if ((a.getAttribute("rel").indexOf("alt") != -1) && (a.getAttribute("title") == title))
{
a.disabled = true;
}
}
}
function enableStyleSheet(title)
{
var i, a;
for (i = 0; (a = document.getElementsByTagName("link")[i]); i++)
{
if ((a.getAttribute("rel").indexOf("alt") != -1) && (a.getAttribute("title") == title))
{
a.disabled = false;
}
}
}
function switchToSiStyleSheet()
{
disableStyleSheet("conventional");
enableStyleSheet("si");
}
function switchToConventionalStyleSheet()
{
disableStyleSheet("si");
enableStyleSheet("conventional");
}
我的按钮操作处理程序看起来像这样：
My button action handler looks something like this:
- (void)notesButtonAction:(id)sender
{
static BOOL isUsingSi = YES;
if (isUsingSi)
{
NSString* command = [[NSString alloc] initWithString:@"switchToSiStyleSheet();"];
[self.webView stringByEvaluatingJavaScriptFromString:command];
[command release];
}
else
{
NSString* command = [[NSString alloc] initWithFormat:@"switchToConventionalStyleSheet();"];
[self.webView stringByEvaluatingJavaScriptFromString:command];
[command release];
}
isUsingSi = !isUsingSi;
}
这是第一个问题。按钮， UIWebView 不会更改。第二次被击中，它看起来像传统的样式表加载。第三次，它切换到SI样式表;第四次，回到常规，等等。
Here's the first problem. The first time the button is hit, the UIWebView doesn't change. The second time it's hit, it looks like the conventional style sheet is loaded. The third time, it switches to the SI style sheet; the fourth time, back to the conventional, and so on. So, basically, only that first button press doesn't seem to do anything.
这里是第二个问题。我不知道如何在初始加载 UIWebView 时切换到正确的样式表。我尝试过：
Here's the second problem. I'm not sure how to switch to the correct style sheet upon initial load of the UIWebView. I tried this:
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString* command = [[NSString alloc] initWithString:@"switchToSiStyleSheet();"];
[self.webView stringByEvaluatingJavaScriptFromString:command];
[command release];
}
但是，就像第一个按钮，它似乎没有做任何事情。
But, like the first button hit, it doesn't seem to do anything.
任何人都可以帮助我解决这两个问题？
推荐答案
您可能早就知道这一点，但由于这是网络上这个主题的最佳网页，我会为了完整性而回答。
You've probably long ago figured this out but since this is the best page on this topic on the web I'll answer for the sake of completeness.
你很亲近。所有你需要做的是在你的HTML头添加一个初始调用你的函数。
You were very close. All you need to do is add an initial call to your function in your HTML head.
<head>
<title>Some Car</title>
<link rel="stylesheet" media="screen" type="text/css" href="persistent.css" />
<link rel="alternate stylesheet" media="screen" type="text/css" href="si.css" title="si" />
<link rel="alternate stylesheet" media="screen" type="text/css" href="conventional.css" title="conventional" />
<script type="text/javascript" src="switch.js"></script>
<script type="text/javascript">switchToSiStyleSheet();</script>
</head>
这篇关于在iPhone上的UIWebView中即时更改CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
