js调用 IOS&Android webview方法

IOS：

  1. 在ViewController.h中声明方法和成员变量,以及webView的委托
  2. 在ViewController.m中合成成员变量并实现该方法
  3. 在ViewController的viewDidLoad方法中加载该html网页
  4. 在ViewController中重写WebView的委托方法shouldStartLoadWithRequest:navigationType:,并接收html网页传递过来的2个参数
  5. 运行项目，点击网页中的按钮，即可实现html调用并传递参数给OC代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <DOCTYPE html>
     <html>
     <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type">
     <title>js调用oc</title>
     <script type="text/javaScript">
     function testClick(cmd)
     {
        window.location.href="objc://"+cmd+":/"+str1+":/"+str2;
        //如果是中文就需要考虑转码的问题
     }
     </script>
     <body>
     <p><input type="button" id="enter" value="enter" onclick="testClick('getParam1:withParam2:');"/></p>
     </body>
     </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    // ViewController.h  
    #import <UIKit/UIKit.h> 
    @interface ViewController : UIViewController<UIWebViewDelegate> 
    {} 
    @property (nonatomic,retain) IBOutlet UIWebView \*webView; 
    // 两个参数 
    -(void)getParam1:(NSString\*)str1 withParam2:(NSString\*)str2; 
    @end

    // ViewController.m
    #import "ViewController.h"
    @interface ViewController ()
    @end
    @implementation ViewController
    @synthesize webView;
    - (void)viewDidLoad
    {
        \[super viewDidLoad\];
        webView.backgroundColor = \[UIColor clearColor\];
        //webView.scalesPageToFit =YES;
        webView.delegate =self;
        NSString \*basePath = \[\[NSBundle mainBundle\]bundlePath\];
        NSString \*helpHtmlPath = \[basePath stringByAppendingPathComponent:@"jsIOS.html"\];
        NSURL \*url = \[NSURL fileURLWithPath:helpHtmlPath\];
        NSURLRequest \*request=\[NSURLRequest requestWithURL:url\];
        \[webView loadRequest:request\];
    }
    - (void)didReceiveMemoryWarning
    {
        \[super didReceiveMemoryWarning\];
        // Dispose of any resources that can be recreated.
    }
    - (BOOL)webView:(UIWebView\*)webView shouldStartLoadWithRequest:(NSURLRequest\*)request navigationType:(UIWebViewNavigationType)navigationType
    {
        NSString \*urlString = \[\[request URL\] absoluteString\];
        urlString = \[urlString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding\];
        NSLog(@"urlString=%@",urlString);
        NSArray \*urlComps = \[urlString componentsSeparatedByString:@"://"\];
        if(\[urlComps count\] && \[\[urlComps objectAtIndex:0\] isEqualToString:@"objc"\])
        {
            NSArray \*arrFucnameAndParameter = \[(NSString\*)\[urlComps objectAtIndex:1\] componentsSeparatedByString:@":/"\];
            NSString \*funcStr = \[arrFucnameAndParameter objectAtIndex:0\];
            if (1 == \[arrFucnameAndParameter count\])
            {
                // 没有参数
                if(\[funcStr isEqualToString:@"doFunc1"\])
                {
                    /\*调用本地函数1\*/
                    NSLog(@"doFunc1");
                }
            }
            else
            {
                //有参数的
                if(\[funcStr isEqualToString:@"getParam1:withParam2:"\])
                {
                    \[self getParam1:\[arrFucnameAndParameter objectAtIndex:1\] withParam2:\[arrFucnameAndParameter objectAtIndex:2\]\];
                }
            }
            return NO;
        }
        return TRUE;
    }
    -(void)getParam1:(NSString\*)str1 withParam2:(NSString\*)str2
    {
            NSLog(@"收到html传过来的参数：str1=%@,str2=%@",str1,str2);
    }
    @end

Android:

Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下，可以讲html放在网络中，软件一打开就会访问网络获取到最新的界面。缺点是会受到网络信号的影响，从而导致访问速度慢。

  1. 用WebView来显示HTML代码
  2. 允许WebView执行JavaScript webView.getSettings().setJavaScriptEnabled(true);
  3. 获取到HTML文件，也可从网络中获取 webView.loadUrl(“file:///android_asset/index.html”);   //HTML文件存放在assets文件夹中
  4. 添加一个对象, 让JS可以访问该对象的方法, 该对象中也可以调用JS中的方法 webView.addJavascriptInterface(new Contact(), “contact”);

完整示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
MainActivity
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends Activity {
    private WebView webView;
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //加载页面
        webView = (WebView) findViewById(R.id.webView);
        //允许JavaScript执行
        webView.getSettings().setJavaScriptEnabled(true);
        //找到Html文件，也可以用网络上的文件
        webView.loadUrl("file:///android\_asset/index.html");
        // 添加一个对象, 让JS可以访问该对象的方法, 该对象中可以调用JS中的方法
        webView.addJavascriptInterface(new Contact(), "contact");
    }
    private final class Contact {
        //JavaScript调用此方法拨打电话
        public void call(String phone) {
            startActivity(new Intent(Intent.ACTION\_CALL, Uri.parse("tel:" + phone)));
        }
        //Html调用此方法传递数据
        public void showcontacts() {
            String json = "\[{\\"name\\":\\"zxx\\", \\"amount\\":\\"9999999\\", \\"phone\\":\\"18600012345\\"}\]"; 
            // 调用JS中的方法
            webView.loadUrl("javascript:show('" + json + "')");
        }
    }
}

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function show(jsondata){
                //数据处理
            }
        </script>
    </head>
    <body onload="javascript:contact.showcontacts()">
//事实上是window对象上的方法 window.contact.showcontacts();
    </body>
</html>

拨打电话需要添加权限：

1
2
<uses-permission android:name="android.permission.CALL\_PHONE" />
url:http://127.0.0.1/index.html

总结：

事实上我们只需要写一个方法即可

1
2
3
4
5
6
7
8
9
function fun(str1,str2){
    if(window.contact){
        //调用Android方法
        window.contact.showcontacts(str1,str2);
    }else{
        //调用IOS方法
        window.location.href="objc://"+cmd+":/"+str1+":/"+str2;
    }
}
学无止境
js调用 IOS&Android webview方法
https://cszy.top/2015-09-01 js调用-iosandroid-webview方法（bom）/
作者
csorz
发布于
2015年9月1日
许可协议