WKWebView tidak memuat file lokal di bawah iOS 8

Untuk beta iOS 8 sebelumnya, muat aplikasi web lokal (dalam Bundel) dan itu berfungsi dengan baik untuk keduanya UIWebViewdan WKWebView, dan saya bahkan mem-porting game web menggunakan WKWebViewAPI baru .

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

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

view.addSubview(webView)

Tapi di beta 4, saya hanya mendapat layar putih kosong ( UIWebViewmasih berfungsi), sepertinya tidak ada yang dimuat atau dieksekusi. Saya melihat kesalahan di log:

Tidak dapat membuat ekstensi kotak pasir untuk /

Ada bantuan untuk membimbing saya ke arah yang benar? Terima kasih!

Mereka akhirnya memecahkan bug tersebut! Sekarang kita bisa menggunakan -[WKWebView loadFileURL:allowingReadAccessToURL:]. Rupanya perbaikan itu bernilai beberapa detik dalam video WWDC 2015 504 Memperkenalkan Pengontrol Tampilan Safari

Untuk iOS8 ~ iOS10 (Swift 3)

Seperti jawaban Dan Fabulish menyatakan ini adalah bug WKWebView yang tampaknya tidak akan diselesaikan dalam waktu dekat dan seperti yang dia katakan ada penyelesaian :)

Saya menjawab hanya karena saya ingin menunjukkan hasil kerja di sini. Kode IMO yang ditampilkan di https://github.com/shazron/WKWebViewFIleUrlTest penuh dengan detail tidak terkait yang mungkin tidak menarik bagi kebanyakan orang.

Solusinya adalah 20 baris kode, penanganan kesalahan dan komentar disertakan, tidak perlu server :)

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
}

Dan bisa digunakan sebagai:

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 tidak dapat memuat konten dari file: URL melalui loadRequest:metodenya. http://www.openradar.me/18039024

Anda dapat memuat konten melalui loadHTMLString:, tetapi jika baseURL Anda adalah file: URL, maka itu tetap tidak akan berfungsi.

iOS 9 memiliki API baru yang akan melakukan apa yang Anda inginkan , [WKWebView loadFileURL:allowingReadAccessToURL:] .

Ada solusi untuk iOS 8 , yang ditunjukkan oleh shazron di Objective-C di sini https://github.com/shazron/WKWebViewFIleUrlTest untuk menyalin file ke /tmp/wwwdan memuatnya dari sana .

Jika Anda bekerja di Swift, Anda dapat mencoba sampel nachos4d sebagai gantinya. (Ini juga jauh lebih pendek dari sampel shazron, jadi jika Anda mengalami masalah dengan kode shazron, cobalah sebagai gantinya.)

Contoh cara menggunakan [WKWebView loadFileURL: allowReadAccessToURL:] di iOS 9 .

Saat Anda memindahkan folder web ke sebuah proyek, pilih "Buat referensi folder"

Kemudian gunakan kode seperti ini (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)
  }
}

Dalam file html gunakan jalur file seperti ini

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

tidak seperti ini

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

Contoh direktori yang dipindahkan ke proyek xcode.

Solusi sementara: Saya menggunakan GCDWebServer , seperti yang disarankan oleh GuidoMB.

Saya pertama kali menemukan jalur folder "www /" yang saya bundel (yang berisi "index.html"):

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

... lalu mulai seperti ini:

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

Untuk menghentikannya:

[_webServer stop];
_webServer = nil;

Performa tampak bagus, bahkan di iPad 2.

Saya melihat crash setelah aplikasi masuk ke latar belakang, jadi saya menghentikannya applicationDidEnterBackground:dan applicationWillTerminate:; Saya memulai / memulai ulang application:didFinishLaunching...dan applicationWillEnterForeground:.

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

Ini memecahkan masalah untuk saya iOS 8.0+ dev.apple.com

juga ini tampaknya bekerja dengan baik juga ...

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

Selain solusi yang disebutkan oleh Dan Fabulich, XWebView adalah solusi lain. [WKWebView loadFileURL: allowingReadAccessToURL:] yang dilaksanakan melalui ekstensi .

Saya belum bisa berkomentar, jadi saya memposting ini sebagai jawaban terpisah.

Ini adalah versi objektif-c dari solusi nacho4d . Solusi terbaik yang pernah saya lihat sejauh ini.

- (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;
}

Jika Anda mencoba untuk menampilkan gambar lokal di tengah string HTML yang lebih besar seperti <img src="file://...">:, gambar tersebut masih tidak muncul di perangkat, jadi saya memuat file gambar ke NSData dan dapat menampilkannya dengan mengganti string src dengan datanya sendiri. Kode contoh untuk membantu membangun string HTML untuk dimuat ke WKWebView, di mana hasilnya akan menggantikan apa yang ada di dalam tanda kutip src = "":

Cepat:

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

Objective-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];

Saya menggunakan di bawah ini. Memiliki beberapa hal tambahan yang sedang saya kerjakan tetapi Anda dapat melihat di mana saya mengomentari loadRequest dan saya mengganti panggilan loadHTMLString. Semoga ini bisa membantu sampai mereka memperbaiki bug.

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)")

    }

}

Untuk siapa yang harus mengatasi masalah ini di bawah iOS8:

Jika halaman Anda tidak rumit, Anda dapat memilih untuk menjadikan halaman tersebut sebagai Aplikasi Halaman Tunggal.

Dengan kata lain, untuk menyematkan semua sumber daya ke dalam file html.

Yang harus dilakukan: 1. salin konten file js / css Anda ke / tags di file html masing-masing; 2. konversikan file gambar Anda menjadi svg untuk menggantikan yang sesuai. 3. memuat halaman seperti sebelumnya, menggunakan [webView loadHTMLString: baseURL:], misalnya

Ini sedikit berbeda dengan menata gambar svg, tetapi itu seharusnya tidak terlalu menghalangi Anda.

Tampaknya kinerja perenderan halaman sedikit menurun, tetapi solusi sederhana seperti itu layak bekerja di iOS8 / 9/10.

Di baris yang sama dengan GCDWebServer, saya menggunakan SImpleHttpServer ( http://www.andyjamesdavies.com/blog/javascript/simple-http-server-on-mac-os-x-in-seconds ) dan kemudian loadRequest dengan localhost url. Dengan pendekatan ini Anda tidak perlu menambahkan pustaka apa pun, tetapi file situs web tidak akan ada dalam bundel sehingga tidak akan dapat dikirimkan. Karena itu, ini akan lebih sesuai untuk kasus Debug.

Saya telah berhasil menggunakan server web PHP di OS X. Menyalin ke direktori sementara / www tidak berhasil untuk saya. Python SimpleHTTPServer mengeluh tentang keinginan membaca jenis MIME, mungkin masalah sandboxing.

Berikut server yang menggunakan 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 solusinya bagus. Saya ingin mengubahnya sedikit tetapi saya tidak tahu bagaimana mengubahnya di posting Anda. Jadi saya taruh di sini, saya harap Anda tidak keberatan. Terima kasih.

Jika Anda memiliki folder www, ada banyak file lain seperti png, css, js dll. Kemudian Anda harus menyalin semua file ke folder tmp / www. misalnya, Anda memiliki folder www seperti ini:

lalu di 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)")
        }
    }
}

file fungsiURLForBuggyWKWebView8 disalin dari @ 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
}

Coba gunakan

[webView loadHTMLString:htmlFileContent baseURL:baseURL];

Sepertinya itu masih berfungsi. Namun.