一、webView调用js代码并向JS内传值
方法一 webView 执行js 函数
- (void)webViewDidFinishLoad:(UIWebView *)webView{
[webView stringByEvaluatingJavaScriptFromString:@"ocCallJSFunction({'name':'vix'})"];
}
#test.js
function ocCallJSFunction(data) {
var obj = eval(data);
alert(obj.name);
}
方法二 获取js上下文 执行js函数
- (void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
[context evaluateScript:@"ocCallJSFunction({'name':'vix'})"];
}
#test.js
function ocCallJSFunction(data) {
var obj = eval(data);
alert(obj.name);
}
方式三 JS调用原生OC的方法，并传值
首先xxx.h设置JSExport协议
@protocol JSObjDelegate <JSExport>
- (NSString *)sayHello;
@end
在xxx.m中遵守协议<JSObjDelegate>
- (void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//定义好JS要调用的方法，sayHello就是调用的方法名
context[@"app"] = self;//遵守协议 app为js中定义的一个类用来调用sayHello方法
}
- (NSString *)sayHello {
return "Hello OC";
}
二、js向OC传值
一、截取webView内链接进行传值
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *url = request.URL.absoluteString;
if ([url rangeOfString:@
"[vix://](vix://)"
].location != NSNotFound) {
// url的协议头是vix
NSLog(@"===%@", url);//获取url中携带的值
return NO;
}
return YES;
}
二、捕获JS里面的方法和方法内的参数
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//定义好JS要调用的方法，ocCallJSFunction就是调用的方法名
context[@"ocCallJSFunction"] = ^{
NSLog(@"+++++++Begin Log+++++++ ");
NSArray *args = [JSContext currentArguments];
for (JSValue *jsVal in args) {
NSLog(@"%@", jsVal.toString);//获取js内参数值123
}
};
}
#xxx.js
function sayHello(){
// alert("hello");
ocCallJSFunction("123")
}
html、js、css代码
#html代码
<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title>第一个HTML</title>
<link rel="stylesheet" type="text/css" href="test.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>我是HTML</h1>
<p id = "p">p标签</p>
<br/><br/><br/>
<button onclick = "sayHello()">点击我弹出hello</button>
</body>
</html>
#css代码
#p{
color:red;
}
#img{
width:120px;
height:50px;
}
#a{
color:yellow;
}
#js代码
function sayHello("123"){
// alert("hello");
ocCallJSFunction("123")
}
//function ocCallJSFunction(data) {
// var obj = eval(data);
// alert(obj.name);
// }
三、获取页面内的任意标签属性的值
- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];//获取当前页面的title
NSString *html = @"document.documentElement.innerHTML";//获取当前网页的html
NSString *html2 = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('creditNum').innerText"];//获取id为creditNum标签的值
NSString *html3 = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('zmScore').value"];//获取标签为id为zmScore的value
NSString *html2 = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].innerText"];//获取标签第一个p的值
NSString *html2 = [webView stringByEvaluatingJavaScriptFromString:@"document.body.innerText"];//获取body里面的全部内容
}
附html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1234</title>
</head>
<style type="text/css">
.issue{
font-family: "微软雅黑";
font-size: 1.2em;
font-weight: 900;
}
.answer{
font-family: "微软雅黑";
font-size: 1em;
margin-top:-15px;
}
</style>
<body>
<input type='hidden' id='zmScore' value='719'/><input type='hidden' id='freeDeposit' value='true'/>
<p id="creditNum"> 791 </P>
<p class="issue">Q：什么是骑行券？</p>
<p class="answer">A：骑行费用的电子券。</p>
<p class="issue">Q：如何获得骑行券？</p>
<p class="answer">A：关注运营方举办的活动。</p>
<p class="issue">Q：如何使用骑行券？</p>
<p class="answer">A：无需用户手动选择。</p>
<p class="issue">Q：一次骑行能有几张骑行券？</p>
<p class="answer">A：每次骑行结算只能使用一张骑行券。</p>
</body>
</html>
持续更新中 ～ (🙈)
