app html5 ios
2015-06-03 12:00:52 lk5423968 阅读数 1057

http://code4app.com/ios/TOWebViewController/5378d0bf933bf0a9608b4c39

TOWebViewController

加入收藏
已有 128 人收藏
Star 643
Fork 93
A view controller class for iOS that allows users to view web pages directly within an app.
update at 2015-06-01

介绍:
    可以很方便和高效地在App中嵌入一个小型的网页浏览器,具有前进、后退、刷新、分享等功能,并且具有加载进度条。

测试环境:
    [Code4App]编译测试,测试环境:Xcode 5.0, iOS 6.0 以上。
效果图:
  • iOS / iPhone / iPad 可以很方便和高效地在App中嵌入一个小型的网页浏览器,具有前进、后退、刷新、分享等功能,并且具有加载进度条。

2014-08-21 10:38:09 maoJava 阅读数 440

有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为webview的跳转很生硬,而ajax+js模拟则不如原生segue平滑)。

有时候我们希望在页面内consloe.log('log something')的时候在控制台里看到输出,但手机里没有控制台,所以我们希望可以利用xcode的控制台输出信息。

因为iOS没有提供API让我们直接用html或者js来跟外部交互,所以我们必须用另外一种巧妙的办法来实现这两个功能。这种方法可以满足我们两种需求。

在html页面中重新定义console.log:

<script>
// Debug
console = new Object();
console.log = function(log) {
	var iframe = document.createElement("IFRAME");
	iframe.setAttribute("src", "ios-log:#iOS#" + log);
	document.documentElement.appendChild(iframe);
	iframe.parentNode.removeChild(iframe);
	iframe = null;
}
console.debug = console.log;
console.info = console.log;
console.warn = console.log;
console.error = console.log;
</script>

然后在需要捕获的viewController.m中实现协议:

- (BOOL)webView: (UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

    NSString *requestString = [[[request URL] absoluteString] stringByReplacingPercentEscapesUsingEncoding: NSUTF8StringEncoding];
	//NSLog(requestString);

	if ([requestString hasPrefix:@"ios-log:"]) {
    	NSString* logString = [[requestString componentsSeparatedByString:@":#iOS#"] objectAtIndex:1];
    	NSLog(@"UIWebView console: %@", logString);
    	return NO;
	}
	return YES;
}

当然前提是webView需要把委托设定为当前控制器:

self.webView =[[UIWebView alloc] initWithFrame:CGRectMake(0.0f,0.0f,self.view.bounds.size.width,self.view.bounds.size.height-44)];
self.webView.delegate=self;

原理很简单,我们重新定义了console.log函数,还有console.debugconsole.infoconsole.warnconsole.error。当我们在页面js中调用console.log的时候,就会创建一个iframe发出请求,请求的协议为ios-log:,路径就是我们的log字符串。发出请求之后,迅速把这个iframe清理掉。

这样,在webview中我们发出了一个请求,然后就没了。外部我们用objective-c实现了一个协议,就是webview开始发出请求之前就会调用的函数。在这个函数中我们过滤所有的请求(因为除了ios-log,还有一些“正常”的请求比如http和mailto),当前缀为ios-log的时候,我们就NSLog即可。

if最后的return NO的意思是该webview的请求被捕获,不再请求(这个实际上不存在的页面)。我们希望一些合法请求(比如http、mailto等)不被捕获,所以最后if外面丢了一个return YES

利用链接触发场景变换

iOS原生的场景变换叫做segue,xcode为我们内置了几种原生动画,比如导航条总是固定在上面的push,这样页面前后推动的时候,导航条保持不变(当然里面的内容可以变),内容的切换也很流畅。segue还可以在interface builder中设置动画效果,包括全屏翻转或者渐进等。

有一些第三方js库可以让我们在webview中模拟这种场景变换,也就是说用css设计一个导航条放在webview中置顶,然后用js或者css3来模拟push或者flip3d的效果。比如iScroll是模拟顶部和底部固定的,jQtouch(这个要翻墙搜索)是模拟push和flip3d效果的。

我强烈反对在原生应用中使用js库来实现场景变换动画,因为非常不流畅、不跟手指、动画效果跟原生不同,还有最后一个原因,我们是可以在webview中触发外部场景变换的,原生的!用html5制作流畅的原生app的关键就是能够方便地调用原生接口的功能或者效果我们都用原生的,而不去用笨拙的方法实现。

webview中的代码:

<a href="myapp://somepagename">一个按钮</a>

非常简单,myapp这个协议你可以自己随便命名,稍后我们会在objective-c中捕获它。

还是要实现该webview的委托controller的协议方法,如果你已经定义这个方法了(就像上面那个例子),你只需要在方法体里加入方法体里面的内容,否则会提醒你重复定义。

- (BOOL)webView: (UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

	NSURL *url = [request URL];
	if ( [[url scheme] isEqualToString:@"myapp"] )
	{
    	NSString *slug = [url path];
    	[self performSegueWithIdentifier:@"heroSegue" sender:slug];
    	return NO;
	}
	return YES;
}

另外我在interface builder中已经拖拽了一个新的控制器,在新的控制器跟导航控制器之间,我直接拖了一个segue,命名id为heroSegue,所以这里可以用performSegueWithIdentifier来调用segue。

现在,还是在本controller中,我们实现另一个委托方法:

/*
 * 页面转换时触发
 */
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
	if ([segue.identifier isEqualToString:@"heroSegue"]) {
    	NSLog(@"%@",sender);
    	[self.webView stopLoading];
    	YUGHeroDetailViewController *destViewController = segue.destinationViewController;
    	destViewController.heroSlug = (NSString *)sender;
	}
}

也就是说,发生segue变化之前,就会执行这一方法,首先判断identifier是不是等于heroSegue,如果是,自己的webview不再载入,目标控制器(也就是即将切换过去的子页面的控制器)中设置公有属性heroSlug的值。

然后,我们在目标页面的controller的H中定义:

@property (strong) NSString *heroSlug;

最后,在目标页面中,我们定义的congroller中的M能拿到heroSlug这个参数。

NSLog(@"%@",self.heroSlug);

这样就可以了,拿到slug之后,我们实际上就可以调用一个本地页面,带上slug参数,然后通过ajax的方式读取远程页面或者json数据,这个就不属于本文内容了。

如果你是新手,在做上面的这些操作的时候可能会漏掉一两个步骤,编辑器会报错,这时候仔细阅读并校对你的代码。如果实在不行,说明清楚操作和报错信息,再给我留言。

练习题:原生title的好处是它在字符数较短时是居中的,而字符更长一点时会偏右显示,更长一些时显示省略号。那么webview载入一个ajax数据的页面的时候,如何在页面载入成功时,设置原生title?

提示,还是自定义协议。

2014-06-30 17:20:27 x32sky 阅读数 1940

有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为webview的跳转很生硬,而ajax+js模拟则不如原生segue平滑)。

有时候我们希望在页面内consloe.log('log something')的时候在控制台里看到输出,但手机里没有控制台,所以我们希望可以利用xcode的控制台输出信息。

因为iOS没有提供API让我们直接用html或者js来跟外部交互,所以我们必须用另外一种巧妙的办法来实现这两个功能。这种方法可以满足我们两种需求。

console.log

在html页面中重新定义console.log:

<script>
// Debug
console = new Object();
console.log = function(log) {
	var iframe = document.createElement("IFRAME");
	iframe.setAttribute("src", "ios-log:#iOS#" + log);
	document.documentElement.appendChild(iframe);
	iframe.parentNode.removeChild(iframe);
	iframe = null;
}
console.debug = console.log;
console.info = console.log;
console.warn = console.log;
console.error = console.log;
</script>

然后在需要捕获的viewController.m中实现协议:

- (BOOL)webView: (UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

    NSString *requestString = [[[request URL] absoluteString] stringByReplacingPercentEscapesUsingEncoding: NSUTF8StringEncoding];
	//NSLog(requestString);

	if ([requestString hasPrefix:@"ios-log:"]) {
    	NSString* logString = [[requestString componentsSeparatedByString:@":#iOS#"] objectAtIndex:1];
    	NSLog(@"UIWebView console: %@", logString);
    	return NO;
	}
	return YES;
}

当然前提是webView需要把委托设定为当前控制器:

self.webView =[[UIWebView alloc] initWithFrame:CGRectMake(0.0f,0.0f,self.view.bounds.size.width,self.view.bounds.size.height-44)];
self.webView.delegate=self;

原理很简单,我们重新定义了console.log函数,还有console.debugconsole.infoconsole.warnconsole.error。当我们在页面js中调用console.log的时候,就会创建一个iframe发出请求,请求的协议为ios-log:,路径就是我们的log字符串。发出请求之后,迅速把这个iframe清理掉。

这样,在webview中我们发出了一个请求,然后就没了。外部我们用objective-c实现了一个协议,就是webview开始发出请求之前就会调用的函数。在这个函数中我们过滤所有的请求(因为除了ios-log,还有一些“正常”的请求比如http和mailto),当前缀为ios-log的时候,我们就NSLog即可。

if最后的return NO的意思是该webview的请求被捕获,不再请求(这个实际上不存在的页面)。我们希望一些合法请求(比如http、mailto等)不被捕获,所以最后if外面丢了一个return YES

利用链接触发场景变换

iOS原生的场景变换叫做segue,xcode为我们内置了几种原生动画,比如导航条总是固定在上面的push,这样页面前后推动的时候,导航条保持不变(当然里面的内容可以变),内容的切换也很流畅。segue还可以在interface builder中设置动画效果,包括全屏翻转或者渐进等。

有一些第三方js库可以让我们在webview中模拟这种场景变换,也就是说用css设计一个导航条放在webview中置顶,然后用js或者css3来模拟push或者flip3d的效果。比如iScroll是模拟顶部和底部固定的,jQtouch(这个要翻墙搜索)是模拟push和flip3d效果的。

我强烈反对在原生应用中使用js库来实现场景变换动画,因为非常不流畅、不跟手指、动画效果跟原生不同,还有最后一个原因,我们是可以在webview中触发外部场景变换的,原生的!用html5制作流畅的原生app的关键就是能够方便地调用原生接口的功能或者效果我们都用原生的,而不去用笨拙的方法实现。

webview中的代码:

<a href="myapp://somepagename">一个按钮</a>

非常简单,myapp这个协议你可以自己随便命名,稍后我们会在objective-c中捕获它。

还是要实现该webview的委托controller的协议方法,如果你已经定义这个方法了(就像上面那个例子),你只需要在方法体里加入方法体里面的内容,否则会提醒你重复定义。

- (BOOL)webView: (UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

	NSURL *url = [request URL];
	if ( [[url scheme] isEqualToString:@"myapp"] )
	{
    	NSString *slug = [url path];
    	[self performSegueWithIdentifier:@"heroSegue" sender:slug];
    	return NO;
	}
	return YES;
}

另外我在interface builder中已经拖拽了一个新的控制器,在新的控制器跟导航控制器之间,我直接拖了一个segue,命名id为heroSegue,所以这里可以用performSegueWithIdentifier来调用segue。

现在,还是在本controller中,我们实现另一个委托方法:

/*
 * 页面转换时触发
 */
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
	if ([segue.identifier isEqualToString:@"heroSegue"]) {
    	NSLog(@"%@",sender);
    	[self.webView stopLoading];
    	YUGHeroDetailViewController *destViewController = segue.destinationViewController;
    	destViewController.heroSlug = (NSString *)sender;
	}
}

也就是说,发生segue变化之前,就会执行这一方法,首先判断identifier是不是等于heroSegue,如果是,自己的webview不再载入,目标控制器(也就是即将切换过去的子页面的控制器)中设置公有属性heroSlug的值。

然后,我们在目标页面的controller的H中定义:

@property (strong) NSString *heroSlug;

最后,在目标页面中,我们定义的congroller中的M能拿到heroSlug这个参数。

NSLog(@"%@",self.heroSlug);

这样就可以了,拿到slug之后,我们实际上就可以调用一个本地页面,带上slug参数,然后通过ajax的方式读取远程页面或者json数据,这个就不属于本文内容了。

如果你是新手,在做上面的这些操作的时候可能会漏掉一两个步骤,编辑器会报错,这时候仔细阅读并校对你的代码。如果实在不行,说明清楚操作和报错信息,再给我留言。

练习题:原生title的好处是它在字符数较短时是居中的,而字符更长一点时会偏右显示,更长一些时显示省略号。那么webview载入一个ajax数据的页面的时候,如何在页面载入成功时,设置原生title?

提示,还是自定义协议。

2016-08-23 08:19:47 hunhun1122 阅读数 5419

在iOS中,需要调起一个app可以使用schema协议,这是iOS原生支持的,并且因为iOS系统中都不能使用自己的浏览器内核,所以所有的浏览器都支持,这跟android生态不一样,android是可以自己搞内核的,但是iOS不行。

在iOS中提供了两种在浏览器中打开APP的方法:Smart App Banner和schema协议。

Smart App Banner

即通过一个meta 标签,在标签上带上app的信息,和打开后的行为,例如:app-id之类的,代码形如:

复制代码代码如下:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

具体可以看下开发文档:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
今天Smart APP Banner不是我们的主角,我们说的是schema

使用schema URL来打开iOS APP

schema类似自定义url协议,我们可以通过自定义的协议来打开自己的应用,形如:

复制代码代码如下:

myapplink://
# 例如 facebook的
fb://
# itunes的
itms-apps://
# 还有短信也是类似的
sms://

如果要打开一个app,最简单的方式是通过一个链接,如我们在html中这样写:
复制代码代码如下:

<a href="myapplink://">打开我的app</a>

当用户点击链接的时候就可以打开对应的app。

绑定click事件

但是实际中我们更多的情况是绑定事件,比如做个弹层啥的,不能一味的用a标签啊,所以可以通过两种方式来解决:location.href和iframe。

iframe的方式是开发中常用的,但是他也有一些问题:

1.我们没很好的方式来判断是否打开了app
2.会引起history变化
3.因为引起history变化,所以一些webview会有问题,比如:我查查,打开一个页面,如果有iframe,选择在safari中打开,实际打开的是iframe的页面
4.如果页面暴漏给了android系统,那么也会出现页面打不开,之类的问题
5.如果没有app,调起不成功,ios的safari会自己弹出一个对话框:打不开网址之类的提示

所以现在的问题是:如何知道iframe已经打开了某个app,即解决iframe打开app回调。

使用iframe在iOS系统中打开app

聪明的你可能想到了,iframe的onload事件啊,可是遗憾的说,无效!所以我们找到了定时器(setTimeout),通过一个定时器,如果在一段时间内(比如500ms),当点击了按钮(记录time1),页面没有切走(调起app之后,页面进程会被中断),进程中断,那么计时器也会中断,这时候应该不会触发timer,如果调起失败,那么timer会就触发,我们判断下在一定时间内如果页面没有被切走,就认为调起失败。

另外通过timer触发时候的timer2,做差,判断是否太离谱了(切走了之后的时间应该比timer实际定时的500ms要长):

复制代码代码如下:

function openIos(url, callback) {
    if (!url) {
        return;
    }
    var node = document.createElement('iframe');
    node.style.display = 'none';
    var body = document.body;
    var timer;
    var clear = function(evt, isTimeout) {
       (typeof callback==='function') &&  callback(isTimeout);
        if (!node) {
            return;
        }
        node.onload = null;
        body.removeChild(node);
        node = null;

    };
    var hide = function(e){
        clearTimeout(timer);
        clear(e, false);
    };
    node.onload = clear;
    node.src = url;
    body.appendChild(node);
    var now = +new Date();
    //如果事件失败,则1秒设置为空
    timer = setTimeout(function(){
        var newTime = +new Date();
          if(now-newTime>600){
            //因为切走了,在切回来需要消耗时间
            //所以timer即使执行了,但是两者的时间差应该跟500ms有较大的出入
            //但是实际并不是这样的!
            clear(null, false);
          }else{
            clear(null, true);
          }
    }, 500);
}

看上去方法很靠谱,但是现实总是那么的残酷!

不同的浏览器app(包括webview),都有自己在后台的常驻时间,即:假如一个浏览器他在被切走之后,后台常驻10s,那么我们设置定时器5s过期就是徒劳的,而且5s的定时器,用户要空等5s!交互也不让你这样干啊!

最后我们想到了pageshow和pagehide事件,即如果浏览器被切走到了要打开的app,应该会触发浏览器的pagehide事件,而从app重新返回到浏览器,就会触发pageshow方法。

但是经过代码测试发现,在uc、chrome中,不会触发pagehide和pageshow的方法,而在safari中可以的。

结论:

1.使用iframe调用schema URL
2.使用定时器判断在一段时间内是否调起成功
3.使用pageshow和pagehide来辅助定时器做更详细的判断
4.定时器中如果有alert可能不会被弹出,这一点很吃惊!后面的dom竟然5.执行了,但是alert没弹出,可能跟alert的实现有关系吧
6.在实验中我使用了两个定时器,是因为切回浏览器之后,有时候timeout触发要在pagehide和pageshow之前
7.计算timer实际执行时间差,也是不靠谱的

最后附上研究的代码,算是比较靠谱的方法了,虽然还是有一定的失败(第三方浏览器pagehide和pageshow不触发):

复制代码代码如下:

<p><button id="btn">点我点我啊!alert,不会弹出</button></p>
<p><button id="btn2">点我点我啊!alert2,虽然有alert和info,info执行,但是alert不弹出</button></p>
<p><button id="btninfo">点我点我啊!info可以</button></p>

$(function(){

  var $info = $('#info');

  function info(msg){
    var p = $('<p>'+msg+'</p>');
    $info.append(p);
  }

  $('#btn').on('click', function(){
    openIos('baiduboxapp://', function(t){
      if(t){
        alert('timeout or no baidu APP');
      }else{
        alert('invoke success');
      }
    });
  });
  $('#btn2').on('click', function(){
    openIos('baiduboxapp://', function(t){
      if(t){
        info('timeout or no baidu APP2');
        alert('timeout or no baidu APP2');
      }else{
        info('invoke success2');
        alert('invoke success2');
      }
    });
  });
  $('#btninfo').on('click', function(){
    openIos('baiduboxapp://', function(t){
      if(t){
        info('timeout or no baidu APP');
      }else{
        info('invoke success');
      }
    });
  });

});

function openIos(url, callback) {
    if (!url) {
        return;
    }
    var node = document.createElement('iframe');
    node.style.display = 'none';
    var body = document.body;
    var timer;
    var clear = function(evt, isTimeout) {
       (typeof callback==='function') &&  callback(isTimeout);
        window.removeEventListener('pagehide', hide, true);
        window.removeEventListener('pageshow', hide, true);
        if (!node) {
            return;
        }

        node.onload = null;
        body.removeChild(node);
        node = null;

    };
    var hide = function(e){
        clearTimeout(timer);
        clear(e, false);
    };
    window.addEventListener('pagehide', hide, true);
    window.addEventListener('pageshow', hide, true);
    node.onload = clear;
    node.src = url;
    body.appendChild(node);
    var now = +new Date();
    //如果事件失败,则1秒设置为空
    timer = setTimeout(function(){
        timer = setTimeout(function(){
          var newTime = +new Date();
          if(now-newTime>1300){
            clear(null, false);
          }else{
            clear(null, true);
          }

        }, 1200);
    }, 60);
}

2014-08-21 10:42:07 maoJava 阅读数 405

问题发生的场景是webview中有一些筛选器,当我点击(在手机上实际上是触摸)筛选器的时候,页面内容会发生变化,但完全是本地的,不涉及数据传输之类的。

这次要解决的体验问题是当点击事件发生的时候,页面会闪烁一下

研究之后发现解决办法是把对click事件的绑定替换成touchend

tagdom.addEventListener('click',function(ev){
	...
}

替换成:

tagdom.addEventListener('touchend',function(ev){
	...
}

代码很简单,但是新的问题出现了,当我按住选择器,然后我突然不想点了,我就会滑走手指,然后放开。我的预期当然是事件被取消,但是touchend还是执行了,并且ev.target仍然是之前的元素。

所以我需要检测是否发生了touchmove事件,解决办法应运而生:

var isScrolling = false;
window.addEventListener('touchstart', function () { isScrolling = false; });
window.addEventListener('touchmove', function () { isScrolling = true; })

所以我们现在有一个变量isScrolling来标志是否滑动了手指,如果没有发生过滑动,那么touchend才生效:

tagdom.addEventListener('touchend',function(ev){
	if(isScrolling == false){
		...
	}
}

现在,页面不会再发生闪烁了。

今天要解决的问题是,当使用HTML5制作(webview)的时候,如果出现垂直滚动条时,手指滑动页面滚动之后,滚动很快停下来,好像踩着刹车在开车,有“滚动很吃力”的感觉。而原生UITableView之类的滚动非常快。

我之前考虑的原因是,可能浏览器渲染webview的重绘非常困难,比如各种绝对定位,华丽的CSS,所以iOS系统选择了降低滚动速度以增强webview滚动时的FPS。

实际上不是这样的,可能是由于使用场景不同,苹果认为用户浏览网页的时候,需要页面滚动不用那么快,所以对webview设置了更高的“减速率”,也就是scrollView的decelerationRate属性。

当我们用HTML5制作应用程序的时候,希望模拟原生组件比如UITableView的滚动速度,所以代码就很简单了:

//滚动速度正常
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;

iOS APP

阅读数 214

使用phone最新版本建立html5app

博文 来自: mcg890414
没有更多推荐了,返回首页