iOS与H5的交互

      虽然在iOS的开发中用H5有很多的弊端，如果你的设备没网络了，那这些用H5填充的iOS框架的APP就活不了了，但是iOS与H5交互在目前的开发中用的很嗨！这个必须会。其实原理还是很好理解的。

 

1、加载本地html代码

这段代码加载了项目资源路径下www目录里面的index.html文件

    NSString *path = [[NSBundle mainBundle]pathForResource:@"index" ofType:@"html" inDirectory:@"www"];

    NSURL *url = [NSURL fileURLWithPath:path];

    NSURLRequest *req = [NSURLRequest requestWithURL:url];

    [_webView loadRequest:req];

2、加载网络html代码

    NSString *fullURL = @"http://ruby-china.org/";

    NSURL *url = [NSURL URLWithString:fullURL];

    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];

    [_webView loadRequest:requestObj];

 

3、原生代码运行页面里面的js代码

 

    [self.webView stringByEvaluatingJavaScriptFromString:@"alert("Calling from native code");"];

 

 

4、响应式布局

对于针对html5平台的html页面，一般都会在head里面添加这样的代码，它能自适应不同尺寸和分辨率密度的屏幕

 

     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

 

5、针对触摸屏优化

这是一段非常神奇的js代码，能够让你的页面中所有标签的跳转，在触摸屏上面的响应速度有一个质的飞跃！对于用户体验的提升，能使得html页面最大化的近似原生应用。

 

{

    var touching_flag = false;

 

    $(document).on('touchstart', "a:not(.notouch):not([href='#'])", function () {

        if (!touching_flag) {

            touching_flag = true;

        }

        window.setTimeout(function () {

            touching_flag = false;

        }, 0);

        return false;

    });

 

    $(document).on('touchend', "a:not(.notouch):not([href='#'])", function () {

        window.location.href = $(this).attr('href');

        touching_flag = false;

    });

 

}

 

 

6、对于提升用户体验非常有用的十个代码片段

http://www.jquery4u.com/plugins/10-jquery-ipad-code-snippets-plugins/