UIWebView与JS的交互,说白了就是Objective-C和JavaScript的相互调用。Objective-C调用JavaScript代码的方法,是通过UIWebView的 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
的方法来实现的。该方法向UIWebView传递一段需要执行的JavaScript代码最后获取执行结果。
JavaScript调用Objective-C的方法,并没有现成的API,但是有些方法可以达到相应的效果。具体是利用UIWebView的特性:在UIWebView的内发起的所有网络请求,都可以通过delegate函数得到通知。
说明:
本文是一个小白记录OC与JS交互的学习历程,适合跟我一样的小白,大神若要喷,请轻喷^_^
学习UIWebView与JS的交互之前,建议熟悉下HTML和Javascript的基本语法,不用看太多,在w3school看一到两天HTML,再看一到两天JS就行。
OC调用JS方法、JS调用OC方法(不使用第三方开源库的情况下)
准备工作:
1.新建一个Single View Application,
再新建一个ViewController(eg:BasicUsageViewController),然后在StoryBoard新建一个ViewController,拖一个UIWebView和UILabel以备用,关联webView及代理
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@property (weak, nonatomic) IBOutlet UILabel *testLabel;
2.在工程中新建一个web1.html
文件(Commend+N、Other
、Empty
、Next
、输入、create
),代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是HTML标题</title>
</head>
<body bgcolor="#9aff9a">
<div id="addNewNodeTest">
<p id="p1"> 这是段落A。</p>
<p id="p2"> 这是段落B。</p>
</div>
<div class="page">
<button onclick="changeUILabelText()"> 改变UILabel文字 </button>
<button onclick="logText()"> NSLog打印文字 </button>
</div>
</body>
</html>
3.再在工程中新建一个test.js
文件,代码如下:
//添加子节点
function addNewNodeTest () {
var para = document.createElement("p");
var node = document.createTextNode("这是新段落。");
para.appendChild(node);
var element = document.getElementById("addNewNodeTest");
element.appendChild(para);
console.log("添加子节点成功");
}
//改变UILabel的文本
function changeUILabelText() {
//"changelabeltext"是你自己定的一个协议。
//注url不要含大写字母,就算是大写字母,在`webView:shouldStartLoadWithRequest:navigationType:`代理方法里也会被替换成小写字母
var url = "changelabeltext:" + "我是改变后的文字";
//给document.location重新赋值就相当于webView加载一个新的URL,所以又会调用`webView:shouldStartLoadWithRequest:navigationType:`方法,然后就可以在这个代理方法里截获这个重定向请求
document.location = url;
}
//也可以自己封装个传参数的方法
function sendCommand(cmd,param){
var url = "yourprotocol:" + cmd + ":" + param;
document.location = url;
}
//打印测试
function logText(){
sendCommand("log","Hi,I'm In logText Function");
}
好了,现在可以开撸了
4.加载webView并插入测试js
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
NSString* path = [[NSBundle mainBundle] pathForResource:@"web1" ofType:@"html"];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"js"];
NSString *jsString = [[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[self.webView stringByEvaluatingJavaScriptFrom