目的:
在我们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