2010-03-29 13 views
9

मान लें कि मैं एक आईफोन ऐप विकसित कर रहा हूं जो कारों की सूची है। उपयोगकर्ता एक सूची से एक कार का चयन करेगा, और मैं कार के लिए एक विस्तृत दृश्य पेश करूंगा, जो शीर्ष गति जैसी चीजों का वर्णन करेगा। विवरण दृश्य अनिवार्य रूप से UIWebView होगा जो मौजूदा HTML फ़ाइल लोड कर रहा है।आईफोन पर एक UIWebView में फ्लाई पर सीएसएस बदलना

विभिन्न उपयोगकर्ता दुनिया के विभिन्न हिस्सों में रहेंगे, इसलिए वे कार के लिए शीर्ष गति देखना चाहेंगे जो कि उनके लोकेल के लिए जो भी इकाइयां उपयुक्त हैं। मान लीजिए कि ऐसी दो इकाइयां हैं: एसआई (किमी/एच) और पारंपरिक (मील प्रति घंटा)। आइए यह भी कहना है कि उपयोगकर्ता स्क्रीन पर एक बटन मारकर प्रदर्शन इकाइयों को बदलने में सक्षम होगा; जब ऐसा होता है, तो विस्तार स्क्रीन को प्रासंगिक इकाइयों को दिखाने के लिए स्विच करना चाहिए।

अभी तक, मैंने यह कोशिश करने और हल करने के लिए किया है।

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

peristent स्टाइलशीट, persistent.css:

#si 
{ 
    display:none; 
} 

#conventional 
{ 
    display:none; 
} 

पहले वैकल्पिक स्टाइलशीट, si.css:

#si 
{ 
    display:inline; 
} 

#conventional 
{ 
    display:none; 
} 

एचटीएमएल कुछ इस तरह लग सकता है और दूसरी वैकल्पिक स्टाइलशीट, पारंपरिक.css:

#si 
{ 
    display:none; 
} 

#conventional 
{ 
    display:inline; 
} 

एक सूची पर एक 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 नहीं बदलता है। दूसरी बार यह मारा गया है, ऐसा लगता है कि पारंपरिक स्टाइल शीट लोड हो गई है। तीसरी बार, यह एसआई स्टाइल शीट पर स्विच करता है; चौथा बार, पारंपरिक पर वापस, और इसी तरह। तो, मूल रूप से, केवल वह पहला बटन प्रेस कुछ भी प्रतीत नहीं होता है।

यहां दूसरी समस्या है। मुझे यकीन नहीं है कि UIWebView के प्रारंभिक लोड पर सही स्टाइल शीट पर कैसे स्विच करें। मैंने कोशिश की यह:

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

लेकिन, पहले बटन हिट की तरह, यह कुछ भी करने को नहीं लगता है।

क्या कोई इन दो समस्याओं के साथ मेरी मदद कर सकता है?

+0

अप्रासंगिक, लेकिन आप केवल 3 ओबीजेसी कथन एक में कर सकते हैं: '[self।webView stringByEvalaluJavaScriptFromString: @ "switchToSi स्टाइलशीट();"]; ' – kennytm

उत्तर

2

आपने शायद इसे पहले ही समझ लिया है, लेकिन चूंकि यह वेब पर इस विषय पर सबसे अच्छा पृष्ठ है, इसलिए मैं पूर्णता के लिए उत्तर दूंगा।

आप बहुत करीब थे। आपको बस इतना करना है कि अपने एचटीएमएल हेड में अपने फंक्शन में प्रारंभिक कॉल जोड़ें।

<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> 
संबंधित मुद्दे