在iPhone上的UIWebView中动态更改CSS

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.

假设我正在开发一款汽车目录的iPhone应用程序。用户将从列表中选择一辆汽车,我将展示汽车的详细视图,其中将描述最高速度等内容。详细视图基本上是一个加载现有HTML文件的UIWebView。

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.

不同的用户将居住在世界的不同地方,因此他们希望看到汽车的最高速度,无论哪个单位都适合他们的地区。假设有两个这样的单位:SI(km / h)和传统(mph)。我们还说用户可以通过点击屏幕上的按钮来更改显示单位;当发生这种情况时,细节屏幕应切换到显示相关单位。

So far, here's what I've done to try and solve this.

到目前为止,这是我尝试解决这个问题的方法。

The HTML might look something like this:

HTML可能看起来像这样:

<?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>

The peristent stylesheet, persistent.css:

持久的样式表,persistent.css:

#si
{
    display:none;
}

#conventional
{
    display:none;
}

The first alternate stylesheet, si.css:

第一个备用样式表,si.css:

#si
{
    display:inline;
}

#conventional
{
    display:none;
}

And the second alternate stylesheet, conventional.css:

而第二个备用样式表,conventional.css:

#si
{
    display:none;
}

#conventional
{
    display:inline;
}

Based on a tutorial at A List Apart, my switch.js looks something like this:

根据A List Apart的教程,我的switch.js看起来像这样:

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

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不会更改。它第二次被击中,看起来像传统的样式表被加载。第三次,它切换到SI样式表;第四次,回到常规,等等。所以,基本上,只有按下第一个按钮似乎没有做任何事情。

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:

这是第二个问题。我不确定如何在初始加载UIWebView时切换到正确的样式表。我试过这个:

- (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.

但是,就像第一个按钮命中一样,它似乎没有做任何事情。

Can anyone help me with these two problems?

有谁可以帮我解决这两个问题?

1 个解决方案

#1

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.

你可能很久以前就已经想到了这一点,但由于这是关于网络上这个主题的最佳页面,我将为了完整性而回答。

You were very close. All you need to do is add an initial call to your function in your HTML head.

你非常接近。您需要做的就是在HTML头中添加对函数的初始调用。

<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>

#1