【问题标题】：Changing CSS on the fly in a UIWebView on iPhone在 iPhone 上的 UIWebView 中动态更改 CSS
【发布时间】：2011-02-01 22:35:32
【问题描述】：

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

不同的用户将生活在世界不同的地方，因此他们希望看到汽车的最高时速在适合他们所在地区的任何单位。假设有两个这样的单位：SI (km/h) 和传统的 (mph)。假设用户可以通过点击屏幕上的按钮来更改显示单位；发生这种情况时，详细屏幕应切换以显示相关单位。

到目前为止，这是我为尝试解决这个问题所做的工作。

HTML 可能如下所示：

某辆车

一些汽车

最高速度：160 公里/小时

最高时速：100 英里/小时

正文>

持久样式表，persistent.css：

#si
{
    display:none;
}

#conventional
{
    display:none;
}

第一个备用样式表，si.css：

#si
{
    display:inline;
}

#conventional
{
    display:none;
}

还有第二个备用样式表，conventional.css：

#si
{
    display:none;
}

#conventional
{
    display:inline;
}

基于 A List Apart 的 tutorial，我的 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");
}

我的按钮操作处理程序如下所示：

- (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 样式表；第四次，回到常规，以此类推。 所以，基本上，只有第一次按下按钮似乎没有任何作用。

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

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString* command = [[NSString alloc] initWithString:@"switchToSiStyleSheet();"];
    [self.webView stringByEvaluatingJavaScriptFromString:command];
    [command release];
}

但是，就像第一个按钮被点击一样，它似乎没有做任何事情。

谁能帮我解决这两个问题？

【问题讨论】：

不相关，但您可以将 3 个 ObjC 语句简单地合二为一：[self.webView stringByEvaluatingJavaScriptFromString:@"switchToSiStyleSheet();"];

标签： javascript iphone css cocoa-touch

【解决方案1】：

您可能很久以前就知道了，但由于这是网络上关于此主题的最佳页面，为了完整起见，我会回答。

你们很亲密。您需要做的就是在 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>

【讨论】：