目的：
在我们IOS开发中，有时我们需要用webView来打开一些html文件，并且我需要需要定位到某一行（效果如下图），左图是想要实现的效果。那么如何做到呢？
步骤：
1. 先来分析一下html5中如何写javaScript代码，如下图
!DOCTYPE html>
<html>
<head>
<title>帮助说明 - 网易彩票</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="rule.css">
<script>
// 写javascript代码
// 通过这个家伙可以做跳转
window.location.href = ‘#howtorecharge‘;
</script>
</head>
<body>
<div>
<section id="wrapper">
<article id="scroller">
<dl class="dlInfo">
<dt id="howtoprize"> 1. 如何领奖？</dt>
<dd>单注一万元（含）以下奖金直接打到您的网易宝账户，可以随时消费或提现；单注一万元（含）以上奖金，需要您本人亲自兑奖或授权兑奖，请您放心，如果您中了大奖，我们会有专人及时联系您告知您详细领奖流程！</dd>
<dt id="howtorecharge"> 2. 如何充值？</dt>
<dd> 登录后在“我的彩票-网易宝余额”页面，点击“充值”进入网易宝，选择充值方式：快捷支付、网上银行、手机充值卡等，输入充值金额即可。同时推荐您购买红包，享受一键支付的便捷，还有优惠！</dd>
<dt id="howtowithdraw"> 3. 如何提现？</dt>
<dd>登录后在“我的彩票-网易宝余额”页面，点击“提现”进入网易宝，按照提示操作即可完成提现。</dd>
<dt id="howtobuy"> 4. 如何购彩？</dt>
<dd>登录后在“购彩大厅”选择您想购买的彩种和投注号码，确认支付。购买成功后，您的投注将自动生成订单，可以在“我的彩票”中查看您的投注记录，如您中奖，奖金将自动派发到您的账户中。</dd>
<dt id="whatisfollowandtimes"> 5. 如何连续多期买同一注号码？ </dt>
<dd>使用追号功能即可。比如您选了1注号，并决定连续5期都买这一注，那么只要修改连续购买的期数为5，并提前支付10元钱预付款，系统就会帮您每期都购买。</dd>
<dt id="howtogroupbuy"> 6. 如何跟别人合资买彩票？ </dt>
<dd>合买是由多人共同出资购买彩票，按照出资比例分享奖金的投注方式。您可以在“合买跟单”中挑选发起人战绩优秀、号码靠谱的方案进行跟单。方案中奖后按认购方案的比例分享奖金。</dd>
<dt id="howtoquickpay"> 7. 如何快速支付？ </dt>
<dd> 在手机购彩支付，最快捷的方式是使用红包支付。红包相当于一个彩金账户，每次购彩优先从红包余额扣款，不需要再跳到支付平台或网银进行繁琐的支付流程，真正实现“一键支付”！您可以进入“我的彩票”选购任意面值的红包。</dd>
</dl>
</article>
</section>
</div>
</body>
</html>
2.很明显从上面代码中我们可以看出需要一个ID来跳转
3.再来看一个json文件
[
{
"title" : "如何领奖？",
"html" : "help.html",
"id" : "howtoprize"
},
{
"title" : "如何充值？",
"html" : "help.html",
"id" : "howtorecharge"
},
{
"title" : "如何提现？",
"html" : "help.html",
"id" : "howtowithdraw"
},
{
"title" : "如何购彩？",
"html" : "help.html",
"id" : "howtobuy"
},
{
"title" : "如何连续多期买同一注号码？",
"html" : "help.html",
"id" : "whatisfollowandtimes"
},
{
"title" : "如何跟别人合资买彩票？",
"html" : "help.html",
"id" : "howtogroupbuy"
},
{
"title" : "如何快速支付？",
"html" : "help.html",
"id" : "howtoquickpay"
},
}
4.很明显我们可以定义一个模型来获取json文件，这里面模型为htmlItem
/** title */ @property (nonatomic, strong) NSString *title; /** html */ @property (nonatomic, strong) NSString *html; /** ID */ @property (nonatomic, strong) NSString *ID;
5.创建webView发送请求
UIWebView *webView = (UIWebView *)self.view;
// 如果文件路径中有中文，转换成URL会失败，
NSURL *url = [[NSBundle mainBundle] URLForResource:_htmlItem.html withExtension:nil];
// 创建请求
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
webView.delegate = self;
-上面的代码如何请求url时如果路径有中文需要通过编码才可以，通常用UTF8
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"help.html" ofType:nil];
// // 如果路径中有中文，必须转换下百分号,通常用UTF8转中文
filePath = [filePath stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
//
NSURL *url = [NSURL URLWithString:filePath];
6.也是最关键的一步，监听webView的加载完成的代理方法，通过stringByEvaluatingJavaScriptFromString：方法来执行javaScript
// webView加载完成的时候调用
// 执行javascript,必须要在webView加载完成时候执行
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *javaStr = [NSString stringWithFormat:@"window.location.href = ‘#%@‘;",_htmlItem.ID];
[webView stringByEvaluatingJavaScriptFromString:javaStr];
}
7.效果图
时间： 2024-08-24 00:48:13