在学习调用之前，说下UIWebView的数据请求及主要代理方法
通过 webView 请求数据
// 获取资源请求路径
NSString *urlPath = [[NSBundle mainBundle] pathForResource:@"text.html" ofType:nil];
// 创建URL
NSURL *url = [NSURL URLWithString:urlPath];
// 建立请求
NSURLRequest *request = [NSURLRequest requestWithURL:url];
// 通过webView 加载数据
[self.webView loadRequest:request];webView 的主要代理方法
//网页加载之前会调用此方法
pragma mark ----------此方法可以获取 JS 内部数据----------
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType {
NSLog(@"%s",__func__);
// retrun YES 表示正常加载网页 返回NO 将停止网页加载
return YES;
}
//开始加载网页调用此方法
-(void)webViewDidStartLoad:(UIWebView *)webView {
NSLog(@"%s",__func__);
}
//网页加载完成调用此方法
-(void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"%s",__func__);
}
//网页加载失败 调用此方法
-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
NSLog(@"%s",__func__);
}代理方法调用顺序
通过 JavaScriptCore 调用 JS 内部的 function 方法
//首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）
JSContext *content = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// JS 的 alert 方法
NSString *alert_js = @"alert('我是JS代码 ByJavaScriptCore')";
//通过 oc 方法调用 js 的 alert
[content evaluateScript:alert_js];
通过 JavaScriptCore 获取JS内部的 function 方法内部的数据
JS代码
<script type="text/javascript">
function text1(){
window.location.href = 'text://loginAction';
}
function text2(){
window.location.href = 'text://registAction';
}
function text3(){
window.location.href = 'text://logoutAction';
}
</script>OC 代码
首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）
JSContext *content = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSLog(@"%@",content[@"text1"]);
NSLog(@"%@",content[@"text2"]);
NSLog(@"%@",content[@"text3"]);
通过 webView 调用 JS 的 function 方法
// JS 的 alert 方法
NSString *alert_js = @"alert('我是JS代码 ByWebView')";
//通过 oc 方法调用 js 的 alert
[_webView stringByEvaluatingJavaScriptFromString:alert_js];
通过 webView 调用 JS 的 增 删 改 查 功能
01、 插入
-(void)insert {
NSString *str4 =@"var img = document.createElement('img');"
"img.src = 'image.png';"
"img.width = '355';"
"img.height = '250';"
"document.body.appendChild(img);";
[_webView stringByEvaluatingJavaScriptFromString:str4];
}原数据界面
插入图片后的界面
02、更改
-(void)change {
// 更改密码输入框的占位文字 将 请输入密码 -> 密码
NSString *str = @"var change = document.getElementById('password');"
"change.placeholder = '密码';";
[_webView stringByEvaluatingJavaScriptFromString:str];
// 更改按钮的的文字 将 登录 -> 注册
NSString *str1 = @"var change = document.getElementsByClassName('button')[0];"
"change.innerHTML = '注册';";
[_webView stringByEvaluatingJavaScriptFromString:str1];
}原数据界面
更改密码输入框内部的占位文字和登陆按钮的文字后
03、删除
-(void)delete {
NSString *str1 = @"var word = document.getElementById('name');";
NSString *str2 = @"word.remove();";
[_webView stringByEvaluatingJavaScriptFromString:str1];
[_webView stringByEvaluatingJavaScriptFromString:str2];
}原数据界面
删除 id 为 ‘name’ 的标签后界面
04、查看
既然可以增删改，肯定都先获取的数据，能获取到数据，就能查看数据了，这里就不累赘了。最后：补充原数据间接的HTML主要代码
<body>
<div id="name" align="center">
<input id="userName" placeholder="亲输入用户名"/>
</div>
<div id="pwd" align="center">
<input id="password" placeholder="请输入密码" type="password"/>
</div>
<div id="login" align="center">
<button onclick="loginAction();" class="button">登录</button>
<script type="text/javascript">
function loginAction(){
window.location.href = 'text://loginAction';
}
</script>
</div>
</body>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
