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

最新推荐文章于 2025-05-12 13:42:28 发布

原创最新推荐文章于 2025-05-12 13:42:28 发布 · 3.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ios开发 #H5 #UIWebView #交互

开发技术博客专栏收录该内容

37 篇文章

订阅专栏

本文分享了在移动开发过程中，如何利用原生与H5的混合开发来提高应用性能和用户体验。重点介绍了如何在iOS和Android平台上加载HTML页面到UIWebView控件、使用UIWebViewDelegate委托进行数据交互、以及通过OC和JS进行数据的提交与调用。

随着互联网产业的发展，在移动开发的过程中原生与H5的混合开发在移动开发中占据着越来越重要的地位。

下面介绍开发中的一些心得
1：将HTML页面加载到UIWebview控件中：
A：本地加载：

 NSString *webPath = [[NSBundlemainBundle]pathForResource:@“HelloWord"ofType:@"html”];//获取文件路径
NSURL *webURL = [NSURLfileURLWithPath:webPath];//通过文件路径字符串设置URL
NSURLRequest *URLRequest = [NSURLRequestrequestWithURL:webURL];//设置请求提交的相关URL
[self.webView loadRequest:URLRequest];//提交请求

B：从服务器加载HTML页面

NSString *urlStr = [NSString stringWithFormat:@"%@/appservice/getAnnouncementDetail.do?id=%@",O2O_URL,self.idStr];
    NSURL *url = [NSURL URLWithString:urlStr];
    NSLog(@"url:%@",url);
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];

2.加入UIWebViewDelegate委托(如果想要进行相应的数据交互必须添加相应的我委托)

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType//html页面的js动作触发时运行

-(void)webViewDidFinishLoad:(UIWebView *)webView //html加载完后触发

3.OC提交JS请求.运行JS方法

[self.webViewstringByEvaluatingJavaScriptFromString:@”方法名(%@)",参数]];

4.JS提交请求到OC

-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{
    NSString *requestString = [[requestURL]absoluteString];//获取请求的绝对路径.
    NSArray *components = [requestStringcomponentsSeparatedByString:@":”];//提交请求时候分割参数的分隔符
    if ([componentscount] >1 && [(NSString *)[componentsobjectAtIndex:0]isEqualToString:@"testapp"]) {
//过滤请求是否是我们需要的.不需要的请求不进入条件
      if([(NSString *)[components objectAtIndex:1]isEqualToString:@"change"])
      {
//所要执行的操作
      }
    returnNO;
    }
    returnYES;
}

5.在HTML5中JS的写法

（1）.接收请求的方法写法

function
fund(){
//操作
}

（2）提交请求的方法写法

function sendCommand(cmd,param){
var url="testapp:"+cmd+":"+param;//组合请求字符串
document.location = url;//提交的请求
}