首页 > 编程语言 > 详细

在webView中使用JAVAScript定位

时间:2015-07-04 00:35:45      阅读:443      评论:0      收藏:0      [点我收藏+]

目的

   在我们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.效果图

技术分享

 

在webView中使用JAVAScript定位

原文:http://www.cnblogs.com/samyangldora/p/4619999.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!