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

原创 2015年07月09日 16:21:25

最近在学习利用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 id ="testDiv"style ="margin-top:200px">

        测试内容显示区

    </div>

中显示出来。

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

本文内容参考博文(本人只是大自然的搬运工):

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

JS和Native交互之 -UIWebView的代理方法

原理: - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navig...
  • lxm_780337
  • lxm_780337
  • 2016年03月08日 10:29
  • 448

IOS开发 - UIWebView(用法全面介绍,含最全的JS交互)

前两天我写了一套关于JS与OC交互的三种方法的文章,但是发现自己对UIWebView理解的还是比较浅,一直认为只能简单的当一个webView来使用,具体很多细节都忽略,如果想看我之前UIWebView...
  • sheng_bin
  • sheng_bin
  • 2016年11月10日 22:36
  • 3683

OC和JS的交互,native页面和web页面混合

这里照搬Github的Demo,其实还是很易懂的,首先,要在控制器的.h文件当中实现浏览器控件的协议: 1 #import 2 3 @interface ExampleAppViewContro...
  • ios_xumin
  • ios_xumin
  • 2016年08月04日 15:57
  • 360

iOS开发,UIWebview与H5之间的交互

将HTML页面加载到UIWebview控件中: A:本地加载: NSString *webPath = [[NSBundle  mainBundle]pathForResource:@“Hel...
  • sszTechnology
  • sszTechnology
  • 2016年05月26日 14:57
  • 2609

native与html交互小记

背景     近来写了段一个native与html交互的简单程序。不了解html相关文档。写个博文记录一下。 Demo功能实现: 1. 实现一个activity加载帮助页 2. 帮助页有二级子页面 3...
  • wangxueming
  • wangxueming
  • 2017年05月25日 15:33
  • 197

Android WebView和Native交互的3种方式总结

android webview 和原生交互
  • lizhengwei1989
  • lizhengwei1989
  • 2017年06月17日 15:24
  • 1168

UIWebView的js与native代码的交互

简单演示怎样利用UIWebView的代理和实例方法实现 webview与native代码的交互。
  • u012812881
  • u012812881
  • 2016年07月06日 18:21
  • 353

UIWebView与javascript交互二通过页面的响应事件获取页面输入框内的值

接上篇文章,上篇文章实现了UIwebview对html文件的加载和对js事件的响应,但是对html页面上输入的值没有获取。今天就来说说这个首先要用到工具类WebViewJavascriptBridge...
  • HHL110120
  • HHL110120
  • 2015年04月22日 11:36
  • 1579

Native与H5交互的那些事

原文来自:http://zhengxiaoyong.me/2016/04/20/Native%E4%B8%8EH5%E4%BA%A4%E4%BA%92%E7%9A%84%E9%82%A3%E4%BA%...
  • wu56yue
  • wu56yue
  • 2016年04月24日 22:52
  • 4390

iOS 开发 Object-C和JavaScript交互详解之OC与JS交互在UIWebView中使用

1.需求分析在浏览器终端中写js代码删除网页中不需要的元素 2.OC调用JS需要实现的代理方法网页加载完成时调用的代理方法 当网页加载完成之后,通过OC的方法调用JS的代码,删除网页展示时不需要的内...
  • kuangdacaikuang
  • kuangdacaikuang
  • 2016年11月24日 09:06
  • 715
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UIWebView学习——web页面和Native交互
举报原因:
原因补充:

(最多只允许输入30个字)