How to call a Javascript method in iOS?

Question

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

Leo · Accepted Answer · 2018-07-19 02:09:34Z

5

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

You load the request in viewDidload
Your webview finished load.So you get the value selected.But at this time.You have not select anything.
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.

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

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

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

edited Jul 19, 2018 at 2:09

answered Jun 2, 2015 at 7:01

Leo

24.7k11 gold badges73 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Soumya Ranjan Over a year ago

i follow your code but i can't understand what is WKWebview. Can u please share me some code for this ?

Leo Over a year ago

joshuakehn.com/2014/10/29/… Refer to this link.It is a new feature of iOS 8

Soumya Ranjan Over a year ago

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { This method is not calling....

Soumya Ranjan Over a year ago

Can u tell me what is : [controller addScriptMessageHandler:self name:@"observe"]; .. What is observe....?

Leo Over a year ago

observe is the name you use to post window.webkit.messageHandlers.observe.postMessage

|

Soumya Ranjan · Accepted Answer · 2015-06-03 05:58:58Z

1

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

answered Jun 3, 2015 at 5:58

Soumya Ranjan

4,8432 gold badges28 silver badges52 bronze badges

Comments

Mahesh · Accepted Answer · 2015-06-02 06:28:02Z

0

You have to make a global variable in JavaScript which store the value of answer. your function myFunction() was called after the webview load and when user was selected at that time there are no function called. so you have to call the function rapidly in some time and check it what is the value

answered Jun 2, 2015 at 6:28

Mahesh

9961 gold badge10 silver badges19 bronze badges

Comments

Santu C · Accepted Answer · 2015-06-02 07:14:17Z

0

Please check below code , I have tested in my system .

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"File" ofType:@"html"];
    NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
    [self.webView loadHTMLString:htmlString baseURL:nil];

}

Button action method to check html results after click on radio button -

- (IBAction)action:(id)sender {

    NSString* javaScriptString = @"document.querySelector('input[name=\"sex\"]:checked').value;";
    NSLog(@"%@",  [self.webView stringByEvaluatingJavaScriptFromString: javaScriptString]);
}

Html Files -

<!DOCTYPE html>
<html>
    <body>

        <form action="">
            <input type="radio" name="sex" value="male">Male<br>
            <input type="radio" name="sex" value="female">Female
        </form>

    </body>
</html>

edited Jun 2, 2015 at 7:14

answered Jun 2, 2015 at 6:24

Santu C

2,6542 gold badges14 silver badges21 bronze badges

8 Comments

Soumya Ranjan Over a year ago

Thanks for quick reply. But I don't have any myFunction() method . I have only that HTML file. In that file there is no onclick method so can u explain how to make this ?

Santu C Over a year ago

Ok !! if you click on Radio Button then is there radio button state change to selected ? Or can you provide html for reference

Soumya Ranjan Over a year ago

Yeah, the radio button will change to selected...I updated my question . plz check.

Santu C Over a year ago

Please check above code , i have tested in my system

Soumya Ranjan Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

How to call a Javascript method in iOS?

4 Answers 4

13 Comments

Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

13 Comments

Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related