Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to call a Javascript method in iOS?

Tags:

javascript

html

ios

webview

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/quiz-1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p class="question">1. What is the answer to this question?</p>        

<ul class="answers">            
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>          
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>            
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>            
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>       
</ul>        


<p class="question">2. What is the answer to this question?</p>        

<ul class="answers">            
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Answer 1</label><br/>           
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">Answer 2</label><br/>            
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">Answer 3</label><br/>           
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">Answer 4</label><br/>       
</ul>        

<p class="question">3. What is the answer to this question?</p>        

<ul class="answers">            
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a">Answer 1</label><br/>            
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b">Answer 2</label><br/>            
<input type="radio" name="q3" value="c" id="q3c"><label for="q3c">Answer 3</label><br/>           
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d">Answer 4</label><br/>       
</ul>        

<p class="question">4. What is the answer to this question?</p>        

<ul class="answers">           
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a">Answer 1</label><br/>            
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b">Answer 2</label><br/>            
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c">Answer 3</label><br/>            
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d">Answer 4</label><br/>        
</ul>        

<p class="question">5. What is the answer to this question?</p>        

<ul class="answers">            
<input type="radio" name="q5" value="a" id="q5a"><label for="q5a">Answer 1</label><br/>            
<input type="radio" name="q5" value="b" id="q5b"><label for="q5b">Answer 2</label><br/>            
<input type="radio" name="q5" value="c" id="q5c"><label for="q5c">Answer 3</label><br/>           
<input type="radio" name="q5" value="d" id="q5d"><label for="q5d">Answer 4</label><br/>        
</ul>        

<p class="question">6. What is the answer to this question?</p>        

<ul class="answers">            
<input type="radio" name="q6" value="a" id="q6a"><label for="q6a">Answer 1</label><br/>            
<input type="radio" name="q6" value="b" id="q6b"><label for="q6b">Answer 2</label><br/>            
<input type="radio" name="q6" value="c" id="q6c"><label for="q6c">Answer 3</label><br/>            
<input type="radio" name="q6" value="d" id="q6d"><label for="q6d">Answer 4</label><br/>        
</ul>       

<p class="question">7. What is the answer to this question?</p>        

<ul class="answers">            
<input type="radio" name="q7" value="a" id="q7a"><label for="q7a">Answer 1</label><br/>            
<input type="radio" name="q7" value="b" id="q7b"><label for="q7b">Answer 2</label><br/>            
<input type="radio" name="q7" value="c" id="q7c"><label for="q7c">Answer 3</label><br/>            
<input type="radio" name="q7" value="d" id="q7d"><label for="q7d">Answer 4</label><br/>        
</ul>        

<p class="question">8. What is the answer to this question?</p>        

<ul class="answers">            
<input type="radio" name="q8" value="a" id="q8a"><label for="q8a">Answer 1</label><br/>            
<input type="radio" name="q8" value="b" id="q8b"><label for="q8b">Answer 2</label><br/>            
<input type="radio" name="q8" value="c" id="q8c"><label for="q8c">Answer 3</label><br/>            
<input type="radio" name="q8" value="d" id="q8d"><label for="q8d">Answer 4</label><br/>       
</ul>        

<p class="question">9. What is the answer to this question?</p>        

<ul class="answers">            
<input type="radio" name="q9" value="a" id="q9a"><label for="q9a">Answer 1</label><br/>            
<input type="radio" name="q9" value="b" id="q9b"><label for="q9b">Answer 2</label><br/>            
<input type="radio" name="q9" value="c" id="q9c"><label for="q9c">Answer 3</label><br/>            
<input type="radio" name="q9" value="d" id="q9d"><label for="q9d">Answer 4</label><br/>        
</ul>        

<p class="question">10. What is the answer to this question?</p>        

<ul class="answers">           
<input type="radio" name="q10" value="a" id="q10a"><label for="q10a">Answer 1</label><br/>            
<input type="radio" name="q10" value="b" id="q10b"><label for="q10b">Answer 2</label><br/>            
<input type="radio" name="q10" value="c" id="q10c"><label for="q10c">Answer 3</label><br/>            
<input type="radio" name="q10" value="d" id="q10d"><label for="q10d">Answer 4</label><br/>        
</ul>        

<br/>
<div id="results">            
Show me the answers!       
</div>                

<div id="category1">            
<p>              
<strong>Question 1:</strong> The correct answer is the <strong>Answer 1</strong>.</p>        
</div>        

<div id="category2">            
<p>              
<strong>Question 2:</strong> The correct answer is <strong>Answer 2</strong>.</p>        
</div>        

<div id="category3">            
<p>                
<strong>Question 3:</strong> The correct answer is <strong>Answer 3</strong>.</p>        
</div>        

<div id="category4">            
<p>               
<strong>Question 4:</strong> The correct answer is <strong>Answer 4</strong>.</p>        
</div>        

<div id="category5">            
<p>                
<strong>Question 5:</strong> The correct answer is <strong>Answer 1</strong>.</p>        
</div>        

<div id="category6">            
<p>                
<strong>Question 6:</strong> The correct answer is <strong>Answer 2</strong>.</p>        
</div>        

<div id="category7">            
<p>                
<strong>Question 7:</strong> The correct answer is <strong>Answer 3</strong>.</p>        
</div>        

<div id="category8">            
<p>               
<strong>Question 8:</strong> The correct answer is <strong>Answer 4</strong>.</p>        
</div>        

<div id="category9">           
<p>               
<strong>Question 9:</strong> The correct answer is <strong>Answer 1</strong>.</p>        
</div>        

<div id="category10">            
<p>                
<strong>Question 10:</strong> The correct answer is <strong>Answer 2</strong>.</p>        
</div>        

<div id="category11">            
<p>                
You answered them all right!</p>        
</div>
</body>
</html>

I faced a big problem on my iOS Coding. My requirement is I have a HTML file. That file contain some multiple choice Q&A. I Load that html file in a UIWebView. And when I click that answer button I have to retrieve which button is clicked on webView.

I have to retrieve that method from html file.

How is it possible?

Its not a duplicate Q, I already googled on this and whatever i got, its not satisfying my requirement.

My code is like below : 

- (void)viewDidLoad {
    [super viewDidLoad];

    NSString *path;
    NSBundle *thisBundle = [NSBundle mainBundle];
    path = [thisBundle pathForResource:@"Untitled" ofType:@"html"];
    NSURL *instructionsURL = [NSURL fileURLWithPath:path];
   [_webview loadRequest:[NSURLRequest requestWithURL:instructionsURL]];
  }
  - (void)webViewDidFinishLoad:(UIWebView*)theWebView
  {
    NSString* returnValue =[theWebView stringByEvaluatingJavaScriptFromString:@"myFunction()"];
    NSLog(@"returnValue = %@ ",returnValue);
  }
  - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
  {
     NSLog(@" didFailLoadWithError");
  }

enter image description here

But my output is : Sample_JS[2218:44719] returnValue =

Please help me out ....

like image 296
Soumya Ranjan Avatar asked Jun 02 '15 06:06

Soumya Ranjan

2 Answers

In your code,this is the order that things happen:

  1. You load the request in viewDidload
  2. Your webview finished load.So you get the value selected.But at this time.You have not select anything.
  3. When you select a item, you did not do anything to tell iOS that you select one

So,what I suggest is using WKWebview,it is good to work withs JS Code.

  1. In your js code,add a button to submit. Then in the button action function

    function submit () {
    var message = //here get all your selected items
    window.webkit.messageHandlers.observe.postMessage(message);
 }

  2. In ViewController,create WKUserContentController to handle notification

    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
WKUserContentController *controller = [[WKUserContentController alloc]
                                   init];
[controller addScriptMessageHandler:self name:@"observe"];
 configuration.userContentController = controller;
_webView = [[WKWebView alloc] initWithFrame:self.view.frame
                          configuration:configuration];

  3. In delegate method,handle js event

    -(void)userContentController:(WKUserContentController *)userContentController
  didReceiveScriptMessage:(WKScriptMessage *)message {
//message.body
}

Update whole project

#import <WebKit/WebKit.h>
@interface ViewController ()<WKScriptMessageHandler>

@property (strong, nonatomic) WKWebView  * webview;

@end

@implementation ViewController

- (void)viewDidLoad {
    NSString *path;
    NSBundle *thisBundle = [NSBundle mainBundle];
    path = [thisBundle pathForResource:@"Untitled" ofType:@"html"];
    NSURL *instructionsURL = [NSURL fileURLWithPath:path];

    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
    WKUserContentController *controller = [[WKUserContentController alloc]
                                       init];
    [controller addScriptMessageHandler:self name:@"observe"];
    configuration.userContentController = controller;
    _webview = [[WKWebView alloc] initWithFrame:self.view.frame
                              configuration:configuration];
    [_webview loadRequest:[NSURLRequest requestWithURL:instructionsURL]];
    [self.view addSubview:self.webview];
}

-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSLog(@"%@",message.body);
}

And htmlfile

<html>
<head>
<script type="text/javascript">
function getFirstSelect(){
    var rates = document.getElementsByName('q1');
    var rate_value;
    for(var i = 0; i < rates.length; i++){
        if(rates[i].checked){
            rate_value = rates[i].value;
            break;
        }
    }
    window.webkit.messageHandlers.observe.postMessage(rate_value);
}
</script>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p class="question">1. What is the answer to this question?</p>

<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
</ul>

<div id="Submit">
     <button onclick="getFirstSelect()">Submit</button>
</div>

</body>
</html>

When click submit enter image description here

This is test project,I believe you can figure out rest by yourself

like image 60
Leo Avatar answered Sep 20 '22 22:09

Leo

Finally I am able to solve this Big Issue..

First Set the delegate method for your WebView.

 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
 if ([[[request URL] absoluteString] hasPrefix:@"ios:"])
 {
    // Call the given selector
    [self performSelector:@selector(webToNativeCall)];
    return NO;
 }
 return YES;
}

- (void)webToNativeCall
{
 NSString *returnvalue =  [self.webview stringByEvaluatingJavaScriptFromString:@"returnVal()"];
 NSLog(@"returnvalue == %@",returnvalue);
}

In javascript file :

function getData ()
{
   window.location  = 'ios:webToNativeCall';
}
function returnVal(){
  return values;
}
like image 28
Soumya Ranjan Avatar answered Sep 17 '22 22:09

Soumya Ranjan
Sign in to Comment

Related questions

Watch window or evaluate expressions while debugging in VS Code?
What is relation between server side cookie and javascript cookie?
Intersection of N sorted integer arrays with limit
Javascript - setInterval()
animation is not working as expected
Bootstrap JavaScript not working
Polling interval for xhr for socket.io 1.0
Is it correct to invoke the constructor of a JavaScript Object in one of the prototype functions?
Javascript based dynamic content using htmlUnit
Passing an array of objects to a partial - handlebars.js
Javascript: Still confused by the instanceof operator
Nock - how to mock binary response
selecting proper value from attribute
multiselect checkbox dropdown
Default button in bootstrap modal dialog
Eliminate: ISP Injects Pages with Iframe Script for Ads
Can't add new key to an object response from Mongoose
Creating a filterable list with RxJS
Copy HTML table structure to clipboard
Bootstrap multiselect dropdown is not visible

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!