在webView中使用JAVAScript定位
目的：
在我们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.效果图
