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代码
js调用oc

// ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{}
@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”);

完整示例代码如下:

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:

                      Insert title here                      function show(jsondata){ //数据处理             }                    //事实上是window对象上的方法 window.contact.showcontacts();     

拨打电话需要添加权限:

url:http://127.0.0.1/index.html

总结:

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

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方法
http://example.com/2015-09-01 js调用-iosandroid-webview方法(bom)/
作者
csorz
发布于
2015年9月1日
许可协议