带有本地图像文件的 iOS WebView 远程 html

iOS WebView remote html with local image files(带有本地图像文件的 iOS WebView 远程 html)

问题描述

以前有人问过类似的问题，但我一直找不到解决方案.

Similar questions have been asked before, but I could never find a solution.

这是我的情况 - 我的 UIWebView 加载了一个远程 html 页面.网页中使用的图像在构建时是已知的.为了让页面加载更快，我想在iOS应用中打包图片文件，运行时替换掉.

Here is my situation - my UIWebView loads a remote html page. The images used in the web pages are known at build time. In order to make the page load faster, I want to package the image files in the iOS application and substitue them at runtime.

[请注意，html 是远程的.我总是得到从本地加载 html 和图像文件的答案 - 我已经这样做了]

[Please note that the html is remote. I always get answers for loading both html and image files from local - I have done that already]

我得到的最接近的建议是在 html 页面和 iOS 应用程序中使用自定义 url 方案，例如 myapp://images/img.png，用 NSURLProtocol 子类拦截 myapp://URL 并替换图像带有本地图像.理论上听起来不错，但我还没有找到一个完整的代码示例来证明这一点.

The closest recommendation I got was to use a custom url scheme such as myapp://images/img.png in the html page and in the iOS application, intercept the myapp:// URL with NSURLProtocol subclass and replace the image with a local image. Sounded good in theory, but I haven't come across a complete code example demonstrating this.

我有 Java 背景.我可以使用自定义内容提供程序轻松地为 Android 做到这一点.我确信 iOS/Objective-C 必须存在类似的解决方案.我没有足够的 Objective-C 经验，无法在短时间内自己解决.

I have Java background. I could do this easily for Android using a Custom Content Provider. I am sure a similar solution must exist for iOS/Objective-C. I don't have enough experience in Objective-C to solve it myself in the short timeframe I have.

任何帮助将不胜感激.

推荐答案

好的，这里是一个如何子类化的例子 NSURLProtocol 并提供已经在包中的图像 (image1.png).下面是子类的标题、实现以及如何在 viewController(不完整的代码)和本地 html 文件(可以很容易地与远程文件交换)中使用它的示例.我已经调用了自定义协议:myapp://，您可以在底部的 html 文件中看到.

Ok here is an example how to subclass NSURLProtocol and deliver an image (image1.png) which is already in the bundle. Below is the subclasses' header, the implementation as well as an example how to use it in a viewController(incomplete code) and a local html file(which can be easily exchanged with a remote one). I've called the custom protocol: myapp:// as you can see in the html file at the bottom.

感谢您的提问！我自己问了很长时间，弄清楚这一点所花费的时间每一秒都是值得的.

And thanks for the question! I was asking this myself for quite a long time, the time it took to figure this out was worth every second.

如果有人让我的代码在当前 iOS 版本下运行有困难，请查看 sjs 的答案.当我回答这个问题时，它正在工作.他指出了一些有用的补充并纠正了一些问题，所以也给他一些支持.

If someone has difficulties making my code run under the current iOS version, please have a look at the answer from sjs. When I answered the question it was working though. He's pointing out some helpful additions and corrected some issues, so give props to him as well.

这是它在我的模拟器中的样子:

This is how it looks in my simulator:

MyCustomURLProtocol.h

@interface MyCustomURLProtocol : NSURLProtocol
{
    NSURLRequest *request;
}

@property (nonatomic, retain) NSURLRequest *request;

@end

MyCustomURLProtocol.m

#import "MyCustomURLProtocol.h"

@implementation MyCustomURLProtocol

@synthesize request;

+ (BOOL)canInitWithRequest:(NSURLRequest*)theRequest
{
    if ([theRequest.URL.scheme caseInsensitiveCompare:@"myapp"] == NSOrderedSame) {
        return YES;
    }
    return NO;
}

+ (NSURLRequest*)canonicalRequestForRequest:(NSURLRequest*)theRequest
{
    return theRequest;
}

- (void)startLoading
{
    NSLog(@"%@", request.URL);
    NSURLResponse *response = [[NSURLResponse alloc] initWithURL:[request URL] 
                                                        MIMEType:@"image/png" 
                                           expectedContentLength:-1 
                                                textEncodingName:nil];

    NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"image1" ofType:@"png"];  
    NSData *data = [NSData dataWithContentsOfFile:imagePath];

    [[self client] URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageNotAllowed];
    [[self client] URLProtocol:self didLoadData:data];
    [[self client] URLProtocolDidFinishLoading:self];
    [response release];
}

- (void)stopLoading
{
    NSLog(@"something went wrong!");
}

@end

MyCustomProtocolViewController.h

@interface MyCustomProtocolViewController : UIViewController {
    UIWebView *webView;
}

@property (nonatomic, retain) UIWebView *webView;

@end

MyCustomProtocolViewController.m

...

@implementation MyCustomProtocolViewController

@synthesize webView;

- (void)awakeFromNib
{
    self.webView = [[[UIWebView alloc] initWithFrame:CGRectMake(20, 20, 280, 420)] autorelease];
    [self.view addSubview:webView];
}

- (void)viewDidLoad
{   
    // ----> IMPORTANT!!! :) <----
    [NSURLProtocol registerClass:[MyCustomURLProtocol class]];

    NSString * localHtmlFilePath = [[NSBundle mainBundle] pathForResource:@"file" ofType:@"html"];

    NSString * localHtmlFileURL = [NSString stringWithFormat:@"file://%@", localHtmlFilePath];

    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:localHtmlFileURL]]];

    NSString *html = [NSString stringWithContentsOfFile:localHtmlFilePath encoding:NSUTF8StringEncoding error:nil]; 

    [webView loadHTMLString:html baseURL:nil];
}

file.html

<html>
<body>
    <h1>we are loading a custom protocol</h1>
    <b>image?</b><br/>
    <img src="myapp://image1.png" />
<body>
</html>

这篇关于带有本地图像文件的 iOS WebView 远程 html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！