Giả sử tôi đang phát triển một ứng dụng iPhone là danh mục xe hơi. Người dùng sẽ chọn một chiếc xe từ danh sách, và tôi sẽ trình bày một cái nhìn chi tiết cho chiếc xe, mà sẽ mô tả những thứ như tốc độ tối đa. Chế độ xem chi tiết về cơ bản sẽ là UIWebView đang tải tệp HTML hiện có.Thay đổi CSS khi đang di chuyển trong UIWebView trên iPhone
Những người dùng khác nhau sẽ sống ở các vùng khác nhau trên thế giới, vì vậy họ muốn thấy tốc độ tối đa cho xe ở bất kỳ đơn vị nào phù hợp với ngôn ngữ của họ. Giả sử có hai đơn vị như vậy: SI (km/h) và thông thường (mph). Giả sử người dùng sẽ có thể thay đổi các đơn vị hiển thị bằng cách nhấn một nút trên màn hình; khi điều đó xảy ra, màn hình chi tiết sẽ chuyển sang hiển thị các đơn vị liên quan.
Cho đến nay, đây là những gì tôi đã làm để thử và giải quyết vấn đề này.
HTML có thể trông như thế này:
<?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>
Các peristent stylesheet, persistent.css:
#si
{
display:none;
}
#conventional
{
display:none;
}
Các kiểu thay thế đầu tiên, si.css:
#si
{
display:inline;
}
#conventional
{
display:none;
}
Và biểu định kiểu thay thế thứ hai, convention.css:
#si
{
display:none;
}
#conventional
{
display:inline;
}
Dựa trên một tutorial tại A List Apart, switch.js của tôi trông giống như sau:
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");
}
handler nút hành động của tôi trông giống như sau:
- (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;
}
Đây là vấn đề đầu tiên. Lần đầu tiên nhấn nút, UIWebView không thay đổi. Lần thứ hai nó được nhấn, có vẻ như bảng định kiểu thông thường được tải. Lần thứ ba, nó chuyển sang bảng định kiểu SI; lần thứ tư, trở lại quy ước, v.v. Vì vậy, về cơ bản, chỉ có bấm nút đầu tiên dường như không làm bất cứ điều gì.
Đây là vấn đề thứ hai. Tôi không chắc chắn cách chuyển sang đúng bảng định kiểu khi tải ban đầu của số UIWebView. Tôi đã thử điều này:
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString* command = [[NSString alloc] initWithString:@"switchToSiStyleSheet();"];
[self.webView stringByEvaluatingJavaScriptFromString:command];
[command release];
}
Nhưng, giống như nút bấm đầu tiên, dường như không có gì để làm.
Có ai có thể giúp tôi với hai vấn đề này không?
Không liên quan, nhưng bạn có thể chỉ đơn giản là 3 câu lệnh ObjC thành một: '[tự.webView stringByEvaluatingJavaScriptFromString: @ "switchToSiStyleSheet();"]; ' – kennytm