之前做过一个项目,里面涉及到显示公式之类的东西就必须要在项目里面嵌入网页,最麻烦的就是网页需要在本地自己拼凑成html,然后再使用UIWebView加载出来,这里面就涉及到了一些关于OC和JavaScript交互的问题,对于第一次接触这些的人,还是会走一些弯路。我在此把自己学习的分享出来,希望帮到一些人。
OC和js交互的原理是网页发起一个请求,然后WebView截获这个请求,对于这个请求的话可以是很多种的。我的Demo里面也总结了两种不同的方法。
加载页面的方式也很多
3.实现委托函数(js对oc交互)
不的不提醒一下上面的js代码,如果你不是很熟悉的话,修改一些参数就可以,OC里面要不把js弄错还真是困难,那么多引号,少一个都有可能出问题。反正我弄了一个下午。改来改去总是出错。可能和我不太熟悉JS有很大的关系。这个注入之后,其他的个本地加载没多大区别了。不过有些网页是加了限制不让注入的。团队在开发的时候肯定需要协调好。我demo里面是使用了百度。代码是进去了,但是还是运行不了,百度应该是拦截了它。
参考资料地址时间有些久我都不记得了,这里不在列出,谢谢前辈们,加了很多个人理解,总觉得还是有些问题。不足之处请批评指正。
装载请著名原创地址 :http://blog.csdn.net/zhouzhoujianquan/article/details/45397945
分两部分介绍,第一部分是加载本地网页。然后进行交互。第二部分是加载服务器的网页后进行交互。
一 加载本地网页(demo下载地址}
加载本地网页的话,由于网页都是自己写,我们可以把需要的请求参数都提前写好。这样在OC代码里面就可以直接的和网页交互。OC和js交互的原理是网页发起一个请求,然后WebView截获这个请求,对于这个请求的话可以是很多种的。我的Demo里面也总结了两种不同的方法。
第一种
<script type="text/javascript">
function sendCommand(cmd,param){
var url="zjq:"+cmd+":"+param;
document.location = url;
}
</script>
第二种
<script language="javascript">
function loadURL(url) {
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", url);
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 发起请求后这个iFrame就没用了,所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
function check() {
loadURL("zjq:zjqjjqzjq");
}
</script>
用的比较多也比较简洁的是第一种,第二种的话是发起一个假的请求,一句话,都是为了网页能够刷新一下,WebView的委托才会被调用,才能够拦截到请求,然后做出相应的处理。
1.在界面里面添加一个一个UIWebView和一个按钮,按钮用于OC对网页发起操作currentY = self.navigationController.navigationBar.frame.size.height;
screen = [UIScreen mainScreen].bounds.size;
_webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, currentY, screen.width, screen.height-100)];
self.automaticallyAdjustsScrollViewInsets = NO;
_webView.delegate = self;
// _webView.backgroundColor = [UIColor clearColor];
[self.view addSubview:_webView];
UIButton * button = [[UIButton alloc] initWithFrame:CGRectMake(50, screen.height-50, screen.width-100, 30)];
[button addTarget:self action:@selector(appTojs) forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"app向网页发送消息" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor grayColor]];
[self.view addSubview:button];
2.加载html页面
加载页面的方式也很多
NSString * path = [[NSBundle mainBundle] bundlePath];
NSURL * baseURL = [NSURL fileURLWithPath:path];
NSString * htmlFile = [[NSBundle mainBundle] pathForResource:@"Test" ofType:@"html"];
NSString * htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:(NSUTF8StringEncoding) error:nil];
// 从本地加载一个html文件。
[self.webView loadHTMLString:htmlString baseURL:baseURL];
这种方式把html当作文件加载
NSString * htmlPath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"index.html"];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:htmlPath]]];
这种方法则是相当于发起一个请求
3.实现委托函数(js对oc交互)
//当网页视图被指示载入内容而得到通知。应当返回YES,这样会进行加载
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSURL *url = [request URL];
if ([[url scheme] isEqualToString:@"zjq"]) {
UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"通知" message:[NSString stringWithFormat:@"%@%@",@"发起请求的url是:",[url absoluteString]]delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
[alertView show];
}
//多个
// 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"])
//
return YES;
}
这个返回值一定要是YES的,否则加载不出来,对于上面这个委托方法是用来处理js发起的请求,对于请求的判断,也是可以使用两种不同的方法。上面的源码里面都已经给出。个人更喜欢第一种,如果有多种不同的请求,又有很对子请求的话第二种应该好一些。
//开始请求调用的方法,可以加个指示器
- (void)webViewDidStartLoad:(UIWebView *)webView{
}
//结束请求调用的方法,可以加个指示器
- (void)webViewDidFinishLoad:(UIWebView *)webView{
}
//加载失败的方法
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
NSLog(@"error是%@",error);
}
4.oc对js交互
oc对html进行修改的话,我们使用一个方法就可以。stringByEvaluatingJavaScriptFromString,苹果也就只给了这一个方法。
- (void)appTojs{
NSString * js = @" var p = document.createElement('p'); p.innerText = '增加一行';document.body.appendChild(p);";
[self.webView stringByEvaluatingJavaScriptFromString:js];
}
二 加载网络服务器的页面(demo下载地址)
页面加载本身没有多大的难度,我这里主要介绍的是页面加载结束后,如何把我们的js代码注入到原来的html页面里面,我们才可以知道相应的请求的scheme等的相应信息。否则我的委托函数里面没有判断的根据嘛。 - (void)webViewDidFinishLoad:(UIWebView *)webView{
NSString * string = [webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function sendCommand(cmd,param){"
"var url='zjq:'+cmd+':'+param;"
"document.location = url;"
"}"
"var btn = document.getElementById('test');"
"btn.onclick = function(){"
"sendCommand('zjq','jump');"
"}\" ;"
"alert(script.text);"
"document.getElementsByTagName('html')[0].appendChild(script);"];
NSLog(@"返回的消息是%@",string);
//答应整个页面可以看到我们得代码是否加进去了
NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
NSString *text = [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.innerHTML"];
NSLog(@"url是,%@,text%@",currentURL,text);
}
这里主要的去区别就是在加载结束后我得把我得js代码注入到原网页中
不的不提醒一下上面的js代码,如果你不是很熟悉的话,修改一些参数就可以,OC里面要不把js弄错还真是困难,那么多引号,少一个都有可能出问题。反正我弄了一个下午。改来改去总是出错。可能和我不太熟悉JS有很大的关系。这个注入之后,其他的个本地加载没多大区别了。不过有些网页是加了限制不让注入的。团队在开发的时候肯定需要协调好。我demo里面是使用了百度。代码是进去了,但是还是运行不了,百度应该是拦截了它。
于是Demo就是现在这个样了,我用了一个本地的页面的,但是和从服务器加载出来的差不多。里面我并没有提前写好请求的地址之类的。 是使用OC给html注入的。
有的同学遇到这样的需求,就是想要隐藏某个web的控件。
[webview stringbyevaluatejavascript:@"document.getElementById('').style.display='none'"];
参考资料地址时间有些久我都不记得了,这里不在列出,谢谢前辈们,加了很多个人理解,总觉得还是有些问题。不足之处请批评指正。
装载请著名原创地址 :http://blog.csdn.net/zhouzhoujianquan/article/details/45397945