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

相关文章推荐

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

这里照搬Github的Demo,其实还是很易懂的,首先,要在控制器的.h文件当中实现浏览器控件的协议: 1 #import 2 3 @interface ExampleAppViewContro...

UIWebView的js与native代码的交互

简单演示怎样利用UIWebView的代理和实例方法实现 webview与native代码的交互。

瞎玩php——php与web页面交互之表单初识(1)

打开这个: 在打开的网页中就会看到下边这个表单: 一:了解表单 上边的这个就是一个表单。Web表单的功能就是让浏览者和网站有一个互动的平台。Web表单主要用于在网页中...

利用runTime实现UIWebView 与 JS 随意交互,JS跳转原生页面,亦可实现推送界面万能动态跳转

相信大家是不是遇到过推送跳转到相关页面进行操作,JS交互时也需要跳转相关的页面,然后这个的页面都是不确定,每次跳转页面也不固定这时我们该怎么做呢?原文简单思路: 1、后台提供json,信息包括:要...

UIWebView与javascript交互三通过OC页面来改变html页面上的值

有一件事要说一下哦, 《UIWebView与javascript交互一》这篇博客被几个网站给转载了,很开心,但是开心之余有一点觉得要说一下,大家转载别人的文章的时候记得说明一下转载的出处,有两方面的原...

ios UIWebView与web的交互

最近重构了一个项目,中间大量运用了原生的项目与web的交互,因为此前接触的web仅仅只是展示一下内容,如企业的注册协议及联系方式等信息。因此学习并整理了一下中间的用法,希望给有需要的人参考。 ...

IOS UIWebView与JavaScript交互实现Web App

上一篇文章讲到了Android WebView与JavaScript的交互问题,现在来讲一下IOS的UIWebView与JavaScript的交互问题。和Android的相比,IOS的会略显笨拙一些不...
  • LeyYang
  • LeyYang
  • 2015年08月13日 15:00
  • 8173

Android NDK (学习笔记五) —— java层和native层进行字符串的交互处理

java层和native层进行字符串的交互处理 目标: java层传递String类型的path路径到native层,path值为"/mnt/sdcard/child.txt"; native层...

PHP学习笔记-PHP与Web页面的交互2

转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51660273 本文出自:【顾林海的博客】 前言在《PHP学...

[IOS]使用视图控制器和视图(十)使用 UIWebView 加载 Web 页面

在storyboard中拖入Web View 勾选上Scales Page To fit 拖入代码 在viewDidLoad中添加一些初始化信息 NSURL *...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UIWebView学习——web页面和Native交互
举报原因:
原因补充:

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