WKWebView không tải các tệp cục bộ trong iOS 8

Đối với các bản beta iOS 8 trước đó, hãy tải một ứng dụng web cục bộ (trong Gói) và nó hoạt động tốt cho cả hai UIWebViewvà WKWebViewvà thậm chí tôi đã chuyển một trò chơi web bằng WKWebViewAPI mới .

var url = NSURL(fileURLWithPath:NSBundle.mainBundle().pathForResource("car", ofType:"html"))

webView = WKWebView(frame:view.frame)
webView!.loadRequest(NSURLRequest(URL:url))

view.addSubview(webView)

Nhưng trong phiên bản beta 4, tôi chỉ nhận được một màn hình trắng trống ( UIWebViewvẫn hoạt động), có vẻ như không có gì được tải hoặc thực thi. Tôi đã thấy lỗi trong nhật ký:

Không thể tạo tiện ích mở rộng hộp cát cho /

Bất kỳ sự giúp đỡ để hướng dẫn tôi đi đúng hướng? Cảm ơn!

Cuối cùng họ đã giải quyết được lỗi! Bây giờ chúng ta có thể sử dụng -[WKWebView loadFileURL:allowingReadAccessToURL:]. Rõ ràng bản sửa lỗi đáng giá vài giây trong WWDC 2015 video 504 Giới thiệu Safari View Controller

Đối với iOS8 ~ iOS10 (Swift 3)

Như câu trả lời của Dan Fabulish nói rằng đây là một lỗi của WKWebView mà dường như sẽ không được giải quyết sớm và như anh ấy đã nói rằng có một công việc xung quanh :)

Tôi trả lời chỉ vì tôi muốn giới thiệu công việc ở đây. Mã IMO được hiển thị trong https://github.com/shazron/WKWebViewFIleUrlTest chứa đầy những chi tiết không liên quan mà hầu hết mọi người có lẽ không quan tâm đến.

Công việc xung quanh là 20 dòng mã, xử lý lỗi và nhận xét bao gồm, không cần máy chủ :)

func fileURLForBuggyWKWebView8(fileURL: URL) throws -> URL {
    // Some safety checks
    if !fileURL.isFileURL {
        throw NSError(
            domain: "BuggyWKWebViewDomain",
            code: 1001,
            userInfo: [NSLocalizedDescriptionKey: NSLocalizedString("URL must be a file URL.", comment:"")])
    }
    try! fileURL.checkResourceIsReachable()

    // Create "/temp/www" directory
    let fm = FileManager.default
    let tmpDirURL = URL(fileURLWithPath: NSTemporaryDirectory()).appendingPathComponent("www")
    try! fm.createDirectory(at: tmpDirURL, withIntermediateDirectories: true, attributes: nil)

    // Now copy given file to the temp directory
    let dstURL = tmpDirURL.appendingPathComponent(fileURL.lastPathComponent)
    let _ = try? fm.removeItem(at: dstURL)
    try! fm.copyItem(at: fileURL, to: dstURL)

    // Files in "/temp/www" load flawlesly :)
    return dstURL
}

Và có thể được sử dụng như:

override func viewDidLoad() {
    super.viewDidLoad()
    var fileURL = URL(fileURLWithPath: Bundle.main.path(forResource:"file", ofType: "pdf")!)

    if #available(iOS 9.0, *) {
        // iOS9 and above. One year later things are OK.
        webView.loadFileURL(fileURL, allowingReadAccessTo: fileURL)
    } else {
        // iOS8. Things can (sometimes) be workaround-ed
        //   Brave people can do just this
        //   fileURL = try! pathForBuggyWKWebView8(fileURL: fileURL)
        //   webView.load(URLRequest(url: fileURL))
        do {
            fileURL = try fileURLForBuggyWKWebView8(fileURL: fileURL)
            webView.load(URLRequest(url: fileURL))
        } catch let error as NSError {
            print("Error: " + error.debugDescription)
        }
    }
}

WKWebView không thể tải nội dung từ tệp: URL qua loadRequest:phương thức của nó . http://www.openradar.me/18039024

Bạn có thể tải nội dung qua loadHTMLString:, nhưng nếu baseURL của bạn là tệp: URL, thì nó vẫn không hoạt động.

iOS 9 có một API mới sẽ làm những gì bạn muốn , [WKWebView loadFileURL:allowingReadAccessToURL:] .

Có một giải pháp cho iOS 8 , được shazron trình bày trong Objective-C tại đây https://github.com/shazron/WKWebViewFIleUrlTest để sao chép tệp vào /tmp/wwwvà tải chúng từ đó .

Nếu bạn đang làm việc bằng Swift, bạn có thể thử mẫu của nachos4d . (Nó cũng ngắn hơn nhiều so với mẫu của shazron, vì vậy nếu bạn gặp khó khăn với mã của shazron, hãy thử thay thế.)

Ví dụ về cách sử dụng [WKWebView loadFileURL: allowReadAccessToURL:] trên iOS 9 .

Khi bạn đang di chuyển thư mục web vào một dự án, hãy chọn "Tạo tham chiếu thư mục"

Sau đó, sử dụng mã giống như sau (Swift 2):

if let filePath = NSBundle.mainBundle().resourcePath?.stringByAppendingString("/WebApp/index.html"){
  let url = NSURL(fileURLWithPath: filePath)
  if let webAppPath = NSBundle.mainBundle().resourcePath?.stringByAppendingString("/WebApp") {
    let webAppUrl = NSURL(fileURLWithPath: webAppPath, isDirectory: true)
    webView.loadFileURL(url, allowingReadAccessToURL: webAppUrl)
  }
}

Trong tệp html sử dụng các đường dẫn tệp như thế này

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

không phải như thế này

<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

Ví dụ về thư mục được chuyển đến một dự án xcode.

Giải pháp tạm thời: Tôi đang sử dụng GCDWebServer , theo đề xuất của GuidoMB.

Đầu tiên, tôi tìm thấy đường dẫn của thư mục "www /" được đóng gói của mình (chứa "index.html"):

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

... sau đó khởi động nó như vậy:

_webServer = [[GCDWebServer alloc] init];
[_webServer addGETHandlerForBasePath:@"/" directoryPath:docRoot indexFilename:@"index.html" cacheAge:3600 allowRangeRequests:YES];
[_webServer startWithPort:port bonjourName:nil];

Để ngăn chặn nó:

[_webServer stop];
_webServer = nil;

Hiệu suất xuất hiện tốt, ngay cả trên iPad 2.

Tôi đã nhận thấy sự cố sau khi ứng dụng ở chế độ nền, vì vậy tôi dừng nó lại applicationDidEnterBackground:và applicationWillTerminate:; Tôi bắt đầu / khởi động lại nó trên application:didFinishLaunching...và applicationWillEnterForeground:.

[configuration.preferences setValue:@"TRUE" forKey:@"allowFileAccessFromFileURLs"];

Điều này đã giải quyết vấn đề cho tôi iOS 8.0+ dev.apple.com

cũng có vẻ điều này cũng hoạt động tốt ...

NSString* FILE_PATH = [[[NSBundle mainBundle] resourcePath]
                       stringByAppendingPathComponent:@"htmlapp/FILE"];
[self.webView
    loadFileURL: [NSURL fileURLWithPath:FILE_PATH]
    allowingReadAccessToURL: [NSURL fileURLWithPath:FILE_PATH]
];

Bên cạnh các giải pháp được Dan Fabulich đề cập, XWebView là một giải pháp khác. [WKWebView loadFileURL: allowReadAccessToURL:] được triển khai thông qua tiện ích mở rộng .

Tôi chưa thể bình luận, vì vậy tôi đăng bài này như một câu trả lời riêng biệt.

Đây là phiên bản mục tiêu-c của giải pháp nacho4d . Cách giải quyết tốt nhất mà tôi đã thấy cho đến nay.

- (NSString *)pathForWKWebViewSandboxBugWithOriginalPath:(NSString *)filePath
{
    NSFileManager *manager = [NSFileManager defaultManager];
    NSString *tempPath = [NSTemporaryDirectory() stringByAppendingPathComponent:@"www"];
    NSError *error = nil;

    if (![manager createDirectoryAtPath:tempPath withIntermediateDirectories:YES attributes:nil error:&error]) {
        NSLog(@"Could not create www directory. Error: %@", error);

        return nil;
    }

    NSString *destPath = [tempPath stringByAppendingPathComponent:filePath.lastPathComponent];

    if (![manager fileExistsAtPath:destPath]) {
        if (![manager copyItemAtPath:filePath toPath:destPath error:&error]) {
            NSLog(@"Couldn't copy file to /tmp/www. Error: %@", error);

            return nil;
        }
    }

    return destPath;
}

Trong trường hợp bạn đang cố gắng hiển thị hình ảnh cục bộ ở giữa chuỗi HTML lớn hơn như:, <img src="file://...">nó vẫn không xuất hiện trên thiết bị, vì vậy tôi đã tải tệp hình ảnh vào NSData và có thể hiển thị nó bằng cách thay thế chuỗi src bằng dữ liệu của chính nó. Mã mẫu để giúp xây dựng chuỗi HTML để tải vào WKWebView, trong đó kết quả là những gì sẽ thay thế những gì bên trong dấu ngoặc kép của src = "":

Nhanh:

let pathURL = NSURL.fileURLWithPath(attachmentFilePath)
guard let path = pathURL.path else {
    return // throw error
}
guard let data = NSFileManager.defaultManager().contentsAtPath(path) else {
    return // throw error
}

let image = UIImage.init(data: data)
let base64String = data.base64EncodedStringWithOptions(.Encoding64CharacterLineLength)
result += "data:image/" + attachmentType + "base64," + base64String

var widthHeightString = "\""
if let image = image {
    widthHeightString += " width=\"\(image.size.width)\" height=\"\(image.size.height)\""
}

result += widthHeightString

Mục tiêu-C:

NSURL *pathURL = [NSURL fileURLWithPath:attachmentFilePath];
NSString *path = [pathURL path];
NSData *data = [[NSFileManager defaultManager] contentsAtPath:path];

UIImage *image = [UIImage imageWithData:data];
NSString *base64String = [data base64EncodedStringWithOptions:0];
[result appendString:@"data:image/"];
[result appendString:attachmentType]; // jpg, gif etc.
[result appendString:@";base64,"];
[result appendString:base64String];

NSString *widthHeightString = @"\"";
if (image) {
    widthHeightString = [NSString stringWithFormat:@"\" width=\"%f\" height=\"%f\"", image.size.width, image.size.height];
}
[result appendString:widthHeightString];

Tôi đang sử dụng bên dưới. Có một số thứ bổ sung mà tôi đang làm nhưng bạn có thể thấy nơi tôi đã nhận xét về loadRequest và đang thay thế cuộc gọi loadHTMLString. Hy vọng điều này sẽ hữu ích cho đến khi họ sửa lỗi.

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {

    var theWebView: WKWebView?

    override func viewDidLoad() {
        super.viewDidLoad()

        var path = NSBundle.mainBundle().pathForResource("index", ofType: "html", inDirectory:"www" )
        var url = NSURL(fileURLWithPath:path)
        var request = NSURLRequest(URL:url)
        var theConfiguration = WKWebViewConfiguration()

        theConfiguration.userContentController.addScriptMessageHandler(self, name: "interOp")

        theWebView = WKWebView(frame:self.view.frame, configuration: theConfiguration)

        let text2 = String.stringWithContentsOfFile(path, encoding: NSUTF8StringEncoding, error: nil)

        theWebView!.loadHTMLString(text2, baseURL: nil)

        //theWebView!.loadRequest(request)

        self.view.addSubview(theWebView)


    }

    func appWillEnterForeground() {

    }

    func appDidEnterBackground() {

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func userContentController(userContentController: WKUserContentController!, didReceiveScriptMessage message: WKScriptMessage!){
        println("got message: \(message.body)")

    }

}

Đối với những người phải giải quyết vấn đề này trong iOS8:

Nếu trang của bạn không phức tạp, bạn có thể chọn đặt trang làm Ứng dụng một trang.

Nói cách khác, để nhúng tất cả các tài nguyên vào tệp html.

Việc cần làm: 1. sao chép nội dung tệp js / css của bạn vào các thẻ / trong tệp html tương ứng; 2. chuyển đổi các tệp hình ảnh của bạn thành svg để thay thế cho phù hợp. 3. tải trang như trước, sử dụng [webView loadHTMLString: baseURL:], chẳng hạn

Cách tạo kiểu ảnh svg có hơi khác một chút, nhưng nó sẽ không cản trở bạn quá nhiều.

Có vẻ như hiệu suất hiển thị trang giảm một chút, nhưng thật xứng đáng để có một giải pháp đơn giản như vậy hoạt động trên iOS8 / 9/10.

Trong cùng một dòng của GCDWebServer, tôi đang sử dụng SImpleHttpServer ( http://www.andyjamesdavies.com/blog/javascript/simple-http-server-on-mac-os-x-in-seconds ) và sau đó loadRequest với localhost url. Với cách tiếp cận này, bạn không phải thêm bất kỳ thư viện nào, nhưng các tệp trang web sẽ không nằm trong gói nên nó sẽ không thể phân phối được. Do đó, điều này sẽ thích hợp hơn cho các trường hợp Gỡ lỗi.

Tôi đã quản lý để sử dụng máy chủ web của PHP trên OS X. Việc sao chép vào thư mục tạm thời / www không hoạt động đối với tôi. Python SimpleHTTPServer phàn nàn về việc muốn đọc các loại MIME, có thể là một vấn đề với hộp cát.

Đây là một máy chủ sử dụng php -S:

let portNumber = 8080

let task = NSTask()
task.launchPath = "/usr/bin/php"
task.arguments = ["-S", "localhost:\(portNumber)", "-t", directoryURL.path!]
// Hide the output from the PHP server
task.standardOutput = NSPipe()
task.standardError = NSPipe()

task.launch()

@ nacho4d giải pháp là tốt. Em muốn thay đổi một chút nhưng không biết thay đổi như thế nào trong bài của anh. Vì vậy, tôi đặt nó ở đây mong bạn không phiền. cảm ơn.

Trong trường hợp bạn có một thư mục www có nhiều tệp khác như png, css, js, v.v ... Khi đó bạn phải sao chép tất cả các tệp vào thư mục tmp / www. ví dụ: bạn có một thư mục www như sau:

thì trong Swift 2.0:

override func viewDidLoad() {
    super.viewDidLoad()

    let path = NSBundle.mainBundle().resourcePath! + "/www";
    var fileURL = NSURL(fileURLWithPath: path)
    if #available(iOS 9.0, *) {
        let path = NSBundle.mainBundle().pathForResource("index", ofType: "html", inDirectory: "www")
        let url = NSURL(fileURLWithPath: path!)
        self.webView!.loadRequest(NSURLRequest(URL: url))
    } else {
        do {
            fileURL = try fileURLForBuggyWKWebView8(fileURL)
            let url = NSURL(fileURLWithPath: fileURL.path! + "/index.html")
            self.webView!.loadRequest( NSURLRequest(URL: url))
        } catch let error as NSError {
            print("Error: \(error.debugDescription)")
        }
    }
}

tệp chức năngURLForBuggyWKWebView8 được sao chép từ @ nacho4d:

func fileURLForBuggyWKWebView8(fileURL: NSURL) throws -> NSURL {
    // Some safety checks
    var error:NSError? = nil;
    if (!fileURL.fileURL || !fileURL.checkResourceIsReachableAndReturnError(&error)) {
        throw error ?? NSError(
            domain: "BuggyWKWebViewDomain",
            code: 1001,
            userInfo: [NSLocalizedDescriptionKey: NSLocalizedString("URL must be a file URL.", comment:"")])
    }

    // Create "/temp/www" directory
    let fm = NSFileManager.defaultManager()
    let tmpDirURL = NSURL.fileURLWithPath(NSTemporaryDirectory())
    try! fm.createDirectoryAtURL(tmpDirURL, withIntermediateDirectories: true, attributes: nil)

    // Now copy given file to the temp directory
    let dstURL = tmpDirURL.URLByAppendingPathComponent(fileURL.lastPathComponent!)
    let _ = try? fm.removeItemAtURL(dstURL)
    try! fm.copyItemAtURL(fileURL, toURL: dstURL)

    // Files in "/temp/www" load flawlesly :)
    return dstURL
}

Hãy thử sử dụng

[webView loadHTMLString:htmlFileContent baseURL:baseURL];

Có vẻ như nó vẫn đang hoạt động. Chưa.