iOS webView 远程html加载本地资源

时间：2023-01-25 08:04:03

昨天，一个朋友让我帮他在IOS上弄这样一件事情：

webView 调用远程URL，并且让远程的web 通过自定义标签能实现内嵌本地的图片、js 或音频等。

比如：在服务器端 的html文件中 这样写到

<html>

<body>

<h1>we are loading a custom protocl</h1>

<b>image?</b><br/>

<img src="myapp://image1.png" />

<body>

</html>

那么当这个页面被iOS 中webView 显示的时，当渲染到 myapp://image1.png 的自定义标签的时候能将本地的图片资源 替换进去。这样的好处就是在网络上无需传输图片，性能比较高。

我朋友的项目是基于cordova 框架，一开始我还不是很理解他为什么说要远程web 调用本地资源，在我的脑海里面就是：“这个框架js 不都是本地的吗？？？？”

，然后他告诉我是他在cordova 框架中导航到 自己的web 服务器。   我听了之后就只能用“呵呵” 表示了，好吧...也就不管了。

那么我就想到其实cordova框架就是基于webView 的一个事件拦截和封装的。 其实它是对NSURLProtocol 的自定义累进行注册，那么所有的webview 对http请求都会被他拦截到；

这里我们可以做很多事情；

接下来我们自己做自己的 NSURLProtocol 累吧

#import <Foundation/Foundation.h>

#import <CoreFoundation/CoreFoundation.h>

#import <MobileCoreServices/MobileCoreServices.h>

@interface NSURLProtocolCustom : NSURLProtocol  //在项目中添加自定义NSURLProtocolCustom 并且继承NSURLProtocol

{

}

//实现中重现如下几个方法

@implementation NSURLProtocolCustom

//重写方法 1

+(BOOL)canInitWithRequest:(NSURLRequest *)request

{

NSLog(@"canInitWithRequest");

// 这里是html 渲染时候入口，来处理自定义标签 如 "myapp",若return YES 则会执行接下来的 -startLoading方法

if ([request.URL.scheme caseInsensitiveCompare:@"myapp"] == NSOrderedSame||

[request.URL.scheme caseInsensitiveCompare:@"app"] == NSOrderedSame) {

return YES;

}

return NO;

}

//重写方法

+(NSURLRequest*)canonicalRequestForRequest:(NSURLRequest *)request

{

NSLog(@"canInitWithRequest");

return request;

}

//重写方法

-(void)startLoading

{

//处理自定义标签 ，并实现内嵌本地资源

NSLog(@"startLoading");

NSLog(@"%@", super.request.URL);

NSString *url=super.request.URL.resourceSpecifier;// 得到//image1.png"

//去掉 //前缀（）

url=[url substringFromIndex:2];//image1.png

//若是app 协议 需要添加www (这里是我们自己业务上的吹)

if ([super.request.URL.scheme caseInsensitiveCompare:@"app"]) {

url=[[NSString alloc] initWithFormat:@"www/%@",url];

}

//  NSString *path=  [[NSBundle mainBundle] pathForResource:@"www/image1.png" ofType:nil];

NSString *path=  [[NSBundle mainBundle] pathForResource:url ofType:nil];//这里是获取本地资源路径 如 ：png,js 等

if (!path) {

return;

}

//根据路径获取MIMEType   （以下函数方法需要添加.h文件的引用，）

// Get the UTI from the file's extension:

CFStringRef pathExtension = (__bridge_retained CFStringRef)[path pathExtension];

CFStringRef type = UTTypeCreatePreferredIdentifierForTag(kUTTagClassFilenameExtension, pathExtension, NULL);

CFRelease(pathExtension);

// The UTI can be converted to a mime type:

NSString *mimeType = (__bridge_transfer NSString *)UTTypeCopyPreferredTagWithClass(type, kUTTagClassMIMEType);

if (type != NULL)

CFRelease(type);

// 这里需要用到MIMEType

NSURLResponse *response = [[NSURLResponse alloc] initWithURL:super.request.URL

MIMEType:mimeType

expectedContentLength:-1

textEncodingName:nil];

//    NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"广告iOS" ofType:@"png"];

NSData *data = [NSData dataWithContentsOfFile:path];//加载本地资源

//硬编码 开始嵌入本地资源到web中

[[self client] URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageNotAllowed];

[[self client] URLProtocol:self didLoadData:data];

[[self client] URLProtocolDidFinishLoading:self];

}

-(void)stopLoading

{

NSLog(@"something went wrong!");

}

@end

//类已经实现好了 那么怎样调用呢？？？

//其他代码都已经省略了，核心如下：

- (void)viewDidLoad {

[super viewDidLoad];

// 这里可以看出 只要注册一次就够了。。。我们可以将它写在delegate 入口就可以实现所有的请求拦截

[NSURLProtocol registerClass:[NSURLProtocolCustom class]];

//测试： 这里webView 我是直接从interface build 中引用过来的所以没有自定义实例化。

self.myWebView.backgroundColor = [UIColor  redColor];

self.myWebView.scalesPageToFit =YES;

self.myWebView.delegate =self;

NSURL *url =[[NSURL alloc] initWithString:@"http://192.168.199.197/soqik/test.html"];//地址可以是远程地址也可以是本地的html 方法

NSURLRequest *request =  [[NSURLRequest alloc] initWithURL:url];

[self.myWebView loadRequest:request];

// Do any additional setup after loading the view, typically from a nib.

}

到这里为止远程web调用本地的js 或者图片资源已经完成了，接下来就是怎样在cordova 中进行改造。。。。原本以为在cordova中这样弄进去就可以了，但是发现这样是不行的，原因很简单：它们已经对 这个封装过，所以必须改造它们的对象。经过一定时间的研究 最终发现改造需要到：

CDVURLProtocol.h类中实现

那么这里需要注意的是：若资源找不到则需要调用Cordova封装的方法

//错误处理，而不是直接返回nil  不进行任何处理，这样会导致js 无法正常加载、运行

-(void)startLoading{

....//省略

if (!path) {

[self sendResponseWithResponseCode:401 data:nil mimeType:nil];//重要
return;
}

...//省略

//否则

NSData *data = [NSData dataWithContentsOfFile:path];

[self sendResponseWithResponseCode:200 data:data mimeType:mimeType];

}

好吧，表示完美解决。。。。cordova中可以干任何自己想弄的事情了

(参考资料：http://*.com/questions/5572258/ios-webview-remote-html-with-local-image-files)

iOS webView 远程html加载本地资源的更多相关文章

  1. &lbrack;IOS&rsqb;UIWebView 请求网络页面或者加载本地资源页面

    UIWebView是一个能够显示网页的IOS视图控件,我们可以用它来访问一个网站.下面是具体的实例: 操作步骤: 1.首先在xib文件中拖放一个UIWebView控件到view中 2.将下载的页面以及 ...

  2. iOS WebView 加载本地资源&lpar;图片，文件等&rpar;

    https://www.cnblogs.com/dhui69/p/5596917.html iOS WebView 加载本地资源(图片,文件等) NSString *path = [[NSBundle ...

  3. 填补Resources和WWW加载本地资源的坑

    总的来说Resources和WWW加载本地资源坑比较多,大多与路径有关. 下面代码构成了一个路径的预读模块: 此模块主要解决的坑是:Resources或WWW加载本地的文件夹中的多个文件时,无法获取文 ...

  4. 引入外部 CDN失效时--怎么加载本地资源文件（本文以jquery为例）

    相信大家都使用过CDN静态资源库,比如下面 CDN官方静态资源库:https://cdnjs.com/ 七牛前端公开库:http://staticfile.org   (vue,react,nl都有) ...

  5. MFC CDHtmlDialog 加载本地资源

    步骤:1.资源视图 项目右击选择资源添加,自定义添加新类型 如:JS(会增加JS文件夹)2. 选择1新建的文件夹右击 添加资源 导入 选择js文件引入3. 在资源文件Resource.h文件夹能找到资 ...

  6. qt webengineview 加载本地资源方式

    一.如果把资源添加到本地资源qrc库里了,请使用 ui->preview->setUrl(QUrl("qrc:/HelloWorld2.html")): 二.如果没有现 ...

  7. ios中UIWebview中加载本地文件

    [super viewDidLoad]; webview=[[UIWebView alloc] initWithFrame:self.view.bounds]; [self.view addSubvi ...

  8. 转&colon;Android Webview 加载外部html时选择加载本地的js&comma;css等资源文件

    原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...

  9. 控件WebView网页的加载

    Android:控件WebView网页的加载 WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWe ...

随机推荐

  1. Fluent API 配置

    EF里实体关系配置的方法,有两种: Data Annotation方式配置 也可以 Fluent API 方式配置 Fluent API 配置的方法 EF里的实体关系 Fluent API 配置分为H ...

  2. 将mac上的项目上传到oschina，进行代码托管。

    1.首先看一下自己是否有公钥, 在 我的资料-->SSH公钥  查看,如果没有,添加自己的SSH 公钥: SSH key 可以让你在你的电脑和 Git @ OSC 之间建立安全的加密连接. 2. ...

  3. Android Activity和Fragment的转场动画

    Android Activity和Fragment的转场动画 Activity转场动画 Activity的转场动画是通过overridePendingTransition(int enterAnim, ...

  4. yourphp 的 ThinkTemplate&period;class&period;php与ContentReplaceBehavior&period;class&period;php

    ThinkTemplate.class.php :去掉版权(针对html代码) ContentReplaceBehavior.class.php:一些默认标签的路劲,如:__PUBLIC__,../P ...

  5. new-nav-css

    header:before, header:after ,.navigation:before, .navigation:after,.nav-row:before, .nav-row:after,. ...

  6. 在Android的webview中定做js的alert&comma;confirm和prompt对话框的方法

    在Android的webview中定制js的alert,confirm和prompt对话框的方法 http://618119.com/archives/2010/12/20/199.html 1.首先 ...

  7. &lbrack;转载&rsqb;Extjs中的dom&comma;Ext&period;Element和Ext&period;Component对象的关系

    原文地址:http://www.cnblogs.com/lwzz/archive/2011/01/30/1948106.html   Ext.Element对象是对dom对象的封装,目的是为了跨平台以 ...

  8. JAVA中String类的方法（函数）总结--JAVA基础

    1.concat()方法,当参数为两字符串时,可实现字符串的连接: package cn.nxl123.www; public class Test { public static void main ...

  9. arm汇编之 bne与beq

    在网上看了一些bne和beq的区别,但是对于初学者来说,容易越看越糊涂,因此简单介绍下: 我们先分析CPSR寄存器的Z标识位: cmp指令可以直接影响CPSR寄存器的Z标识位(条件位),从图中可以看出 ...

  10. Django中的csrf基础了解

    简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功能有 ...

相关文章