iOS 简单的JS与Native交互

2017-06-13 本文已影响0人晴朗Nic

一、简单的JS与Native交互支持一般JS与Native交互是没有什么问题的。

1.JS控制Native一般是通过加载HTMl页面触发WebView的代理来实现的。

(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

2.Native控制JS一般通过iOS系统的UIWebView里一个方法实现的stringByEvaluatingJavaScriptFromString。

二、好了直接上代码

1、首先看看HTML那边的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <!-- css作用-->
    <style>
        .mySuper{
            text-align: center;
        }
        #text{
            margin-top: 50px;
        }
        .btn{
            margin-top: 50px;
        }

    </style>
</head>
<body>
<div class="mySuper">
    <div id="text">
        原来的H5的字体。
    </div>

    <button onclick="takeNativeMethod()" class="btn">
        调取Native端的方法
    </button>
</div>

<script type="text/javascript">
 <!-- 通过这个方法调用native端的方法-->
    function takeNativeMethod()
    {
        window.location.href = "ios://调取native方法"
    }
</script>

</body>
</html>

2、Native端的代码主要通过changeH5：这个方法来改变JS实现改变HTML页面的内容，HTML通过代理- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;来调用Native端方法。

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //这里要先实例化UIWebView，添加代理
    self.myWebview.delegate = self;
    
    //把写好的HTML写好，直接拖进项目来，用NSBundle来加载。
    NSString *pathString = [[NSBundle mainBundle] pathForResource:@"JSAndNative" ofType:@"html"];
    [self.myWebview loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:pathString]]];
}


#pragma - webviewDelegate
//同JS每次重新加载页面来调用Native端的方法。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *urlString = request.URL.absoluteString;
    NSLog(@"urlString----%@",urlString);
    //通过ios://标志来区分是加载页面的URL，还是直接调用Native端的方法。
    if ([urlString hasPrefix:@"ios://"]) {
        UIAlertController *alerVC = [UIAlertController alertControllerWithTitle:@"提示" message:@"H5调用系统警告" preferredStyle:UIAlertControllerStyleAlert];
        
        UIAlertAction *alerAction = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            
        }];
        
        [alerVC addAction:alerAction];
        [self presentViewController:alerVC animated:YES completion:^{
            
        }];
    }
    return YES;
}

//通过这个方法来改变JS
- (IBAction)changeH5:(id)sender
{
    [self.myWebview stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"text\").innerHTML = \"这是iOS地盘\""];
}

iOS 简单的JS与Native交互

猜你喜欢

热点阅读