UIWebView学习——web页面和Native交互

最新推荐文章于 2021-10-15 11:36:28 发布

cornyjy

最新推荐文章于 2021-10-15 11:36:28 发布

阅读量730

点赞数

分类专栏： iOS

本文链接：https://blog.csdn.net/yuj9006/article/details/46817935

版权

iOS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

最近在学习利用WebView来进行native和web页面的交互，参考了许多优秀的博客，在这里自己小小总结下。

1.打开Xcode,新建个single-view Application 项目

2. 加入基础的框架Foundation.framework、CoreGraphics.framework、UIKit.framework。

3. 在main.storyboard中放入一个UIWebView，一个UITextField 一个UIButton按钮，并设置对应的方法。

4.准备好一个Test.html,放到项目路径下，其内容如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test页面</title>
</head>

<script type="text/javascript">
    
function sendCommand(cmd,param){
    var url="testapp:"+cmd+":"+param;
    document.location = url;
}
</script>

<style type="text/css">
.main
{
    text-align: center;
    background-color:white;
}
</style>

<body style="background-color: transparent" class = "main">
   
   <div id = "testDiv" style = "margin-top:200px">
        测试内容显示区
    </div>
    
    <input type="button" value="调用Native方法" onclick = "sendCommand('alert','JS send Message to App');"/>
    
</body>

</html>

<script type="text/javascript">

function getMessageFromApp(message)
{
    var testDiv = document.getElementById("testDiv");
    testDiv.innerText = message;
}

</script>

5.将html网页加载进入UIWebView容器中

在"-(void)viewDidLoad”方法中加入如下代码来加载html页面

- (void)viewDidLoad
{
    [super viewDidLoad];
	NSString *strURL = [[NSBundle mainBundle] pathForResource:@"Test" ofType:@"html"];
    NSURL *url = [[NSURL alloc] initFileURLWithPath:strURL];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}

6.加入UIWebViewDelegate委托(如果想要进行相应的数据交互必须添加相应的委托)。并实现以下两个方法

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

//接收页面调用的方法
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSString *requestString = [[request URL] absoluteString];//获取请求的绝对路径.
    
	NSArray *components = [requestString componentsSeparatedByString:@":"];//提交请求时候分割参数的分隔符
    
    if ([components count] > 1 && [(NSString *)[components objectAtIndex:0] isEqualToString:@"testapp"]) {
        //过滤请求是否是我们需要的.不需要的请求不进入条件
        if([(NSString *)[components objectAtIndex:1] isEqualToString:@"alert"])
        {
            NSString *message = (NSString *)[components objectAtIndex:2];
            UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"JS向APP提交数据" message:message delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
            [alert show];
        }
        return NO;
    }
    return YES;
}

-(void)webViewDidFinishLoad:(UIWebView *)webView

//webview加载完成
-(void)webViewDidFinishLoad:(UIWebView *)webView{
    //调用 页面js方法
    [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"getMessageFromApp('%@')", @"加载结束调用方法"]];
}

7.Native调用前台js方法

mian.storyboard中的 UIButton响应函数，用来将UITextField中的值传递给Test.hmtl 并在

测试内容显示区

</div>

中显示出来。

- (IBAction)messageToHtml:(id)sender {
    NSString *message = self.jsText.text;
    
    [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"getMessageFromApp('%@')", message]];
}

本文内容参考博文（本人只是大自然的搬运工）：

http://www.aichengxu.com/view/9947

cornyjy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UIWebView学习——web页面和Native交互

最近在学习利用WebView来进行native和web页面的交互，参考了许多优秀的博客，在这里将自己的学习过程尽心了一下总结。1.打开Xcode,新建个single-view Application 项目2. 加入基础的框架Foundation.framework、CoreGraphics.framework、UIKit.framework。3. 在main.storyboar
复制链接

扫一扫