WKWebView ไม่โหลดไฟล์ในเครื่องภายใต้ iOS 8

สำหรับ iOS 8 รุ่นก่อนหน้านี้ให้โหลดแอปพลิเคชันเว็บในเครื่อง (ใน Bundle) และใช้งานได้ดีสำหรับทั้งสองUIWebViewและWKWebViewและฉันยังพอร์ตเกมบนเว็บโดยใช้WKWebViewAPI ใหม่

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

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

view.addSubview(webView)

แต่ในเบต้า 4 ฉันมีหน้าจอสีขาวว่างเปล่า ( UIWebViewยังใช้งานได้) ดูเหมือนไม่มีอะไรโหลดหรือดำเนินการ ฉันเห็นข้อผิดพลาดในบันทึก:

ไม่สามารถสร้างส่วนขยายแซนด์บ็อกซ์สำหรับ /

มีความช่วยเหลือเพื่อชี้แนะทิศทางที่ถูกต้องหรือไม่? ขอบคุณ!

ในที่สุดพวกเขาก็แก้ไขข้อบกพร่อง! ตอนนี้เราสามารถใช้-[WKWebView loadFileURL:allowingReadAccessToURL:]. เห็นได้ชัดว่าการแก้ไขนั้นคุ้มค่ากับบางวินาทีในวิดีโอ WWDC 2015 504 แนะนำ Safari View Controller

สำหรับ iOS8 ~ iOS10 (Swift 3)

ในฐานะที่เป็นคำตอบของแดน Fabulish ของรัฐนี้เป็นปัญหาของ WKWebView ซึ่งเห็นได้ชัดไม่ได้ถูกแก้ไขได้ในเร็ว ๆ นี้และในขณะที่เขากล่าวว่ามีการทำงานรอบ :)

ฉันตอบเพียงเพราะต้องการแสดงวิธีแก้ปัญหาที่นี่ รหัส IMO ที่แสดงในhttps://github.com/shazron/WKWebViewFIleUrlTestเต็มไปด้วยรายละเอียดที่ไม่เกี่ยวข้องซึ่งคนส่วนใหญ่อาจไม่สนใจ

วิธีแก้ปัญหาคือโค้ด 20 บรรทัดการจัดการข้อผิดพลาดและความคิดเห็นรวมอยู่ด้วยไม่จำเป็นต้องใช้เซิร์ฟเวอร์ :)

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
}

และสามารถใช้เป็น:

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 ไม่สามารถโหลดเนื้อหาจากไฟล์: URL ผ่านloadRequest:วิธีการ http://www.openradar.me/18039024

คุณสามารถโหลดเนื้อหาผ่านทางloadHTMLString:แต่ถ้า baseURL ของคุณเป็นไฟล์: URL ก็จะยังใช้ไม่ได้

iOS 9 มี API [WKWebView loadFileURL:allowingReadAccessToURL:]ใหม่ที่จะทำในสิ่งที่คุณต้องการ

มีวิธีแก้ปัญหาสำหรับ iOS 8 , แสดงให้เห็นโดย Shazron ใน Objective-C ที่นี่https://github.com/shazron/WKWebViewFIleUrlTestการคัดลอกไฟล์ลง/tmp/wwwและโหลดจากที่นั่น

หากคุณทำงานใน Swift คุณสามารถลองใช้ตัวอย่างของ nachos4dแทน (นอกจากนี้ยังสั้นกว่าตัวอย่างของ shazron มากดังนั้นหากคุณมีปัญหากับรหัสของ shazron ให้ลองใช้แทน)

ตัวอย่างของวิธีการใช้งาน [WKWebView loadFileURL: allowingReadAccessToURL:] บนiOS 9

เมื่อคุณย้ายโฟลเดอร์เว็บไปยังโปรเจ็กต์ให้เลือก "สร้างการอ้างอิงโฟลเดอร์"

จากนั้นใช้รหัสที่เป็นดังนี้ (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)
  }
}

ในไฟล์ html ใช้ filepaths เช่นนี้

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

ไม่เหมือน

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

ตัวอย่างไดเร็กทอรีที่ย้ายไปยังโปรเจ็กต์ xcode

วิธีแก้ปัญหาชั่วคราว: ฉันใช้GCDWebServerตามที่ GuidoMB แนะนำ

อันดับแรกฉันจะค้นหาเส้นทางของโฟลเดอร์ "www /" ที่รวมไว้ของฉัน (ซึ่งมี "index.html"):

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

... จากนั้นเริ่มต้นดังนี้:

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

เพื่อหยุดมัน:

[_webServer stop];
_webServer = nil;

ประสิทธิภาพดูดีแม้บน iPad 2

ผมสังเกตความผิดพลาดหลังจากที่แอปไปลงในพื้นหลังเพื่อให้ฉันหยุดมันบนapplicationDidEnterBackground:และapplicationWillTerminate:; ฉันจะเริ่มต้น / รีสตาร์ทบนและapplication:didFinishLaunching...applicationWillEnterForeground:

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

สิ่งนี้ช่วยแก้ปัญหาสำหรับฉัน iOS 8.0+ dev.apple.com

ดูเหมือนว่ามันจะทำงานได้ดีเช่นกัน ...

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

นอกเหนือจากโซลูชันที่ Dan Fabulich กล่าวถึงแล้วXWebViewยังเป็นอีกหนึ่งวิธีแก้ปัญหา [WKWebView loadFileURL: allowingReadAccessToURL:]จะดำเนินการผ่านการขยาย

ฉันยังไม่สามารถแสดงความคิดเห็นได้ดังนั้นฉันจึงโพสต์ข้อความนี้เป็นคำตอบแยกต่างหาก

นี้เป็นรุ่นที่วัตถุประสงค์ -c ของการแก้ปัญหาของ nacho4d วิธีแก้ปัญหาที่ดีที่สุดที่ฉันเคยเห็นมา

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

ในกรณีที่คุณพยายามแสดงภาพในเครื่องที่อยู่ตรงกลางของสตริง HTML ที่ใหญ่กว่าเช่น: <img src="file://...">มันยังไม่ปรากฏบนอุปกรณ์ดังนั้นฉันจึงโหลดไฟล์รูปภาพลงใน NSData และสามารถแสดงได้โดยการแทนที่สตริง src ด้วย ข้อมูลเอง โค้ดตัวอย่างเพื่อช่วยสร้างสตริง HTML เพื่อโหลดเข้าสู่ WKWebView โดยผลลัพธ์คือสิ่งที่จะแทนที่สิ่งที่อยู่ในเครื่องหมายคำพูดของ src = "":

สวิฟท์:

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

ฉันใช้ด้านล่าง มีสิ่งพิเศษบางอย่างที่ฉันกำลังทำอยู่ แต่คุณสามารถดูได้ว่าฉันแสดงความคิดเห็นเกี่ยวกับ loadRequest ไว้ที่ไหนและกำลังแทนที่การเรียก loadHTMLString หวังว่านี่จะช่วยได้จนกว่าพวกเขาจะแก้ไขข้อบกพร่อง

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

    }

}

สำหรับผู้ที่ต้องแก้ไขปัญหานี้ภายใต้ iOS8:

หากเพจของคุณไม่ซับซ้อนคุณอาจเลือกให้เพจเป็น Single Page Application

กล่าวอีกนัยหนึ่งคือเพื่อฝังทรัพยากรทั้งหมดลงในไฟล์ html

สิ่งที่ต้องทำ: 1. คัดลอกเนื้อหาของไฟล์ js / css ของคุณลงใน / แท็กในไฟล์ html ตามลำดับ; 2. แปลงไฟล์รูปภาพของคุณเป็น svg เพื่อแทนที่ไฟล์. 3. โหลดหน้าเว็บเหมือนเดิมโดยใช้ [webView loadHTMLString: baseURL:] เช่น

มันแตกต่างกันเล็กน้อยกับการจัดแต่งทรงผมภาพ svg แต่ก็ไม่ควรปิดกั้นคุณมากนัก

ดูเหมือนว่าประสิทธิภาพในการเรนเดอร์เพจจะลดลงเล็กน้อย แต่ก็คุ้มค่าที่จะมีวิธีแก้ปัญหาง่ายๆเช่นนี้ทำงานภายใต้ iOS8 / 9/10

ในบรรทัดเดียวกันของ GCDWebServer ฉันใช้ SImpleHttpServer ( http://www.andyjamesdavies.com/blog/javascript/simple-http-server-on-mac-os-x-in-seconds ) จากนั้น loadRequest ด้วย localhost URL ด้วยวิธีนี้คุณไม่จำเป็นต้องเพิ่มไลบรารีใด ๆ แต่ไฟล์เว็บไซต์จะไม่อยู่ในบันเดิลดังนั้นจึงไม่สามารถส่งมอบได้ ด้วยเหตุนี้สิ่งนี้จึงเหมาะสมกว่าสำหรับกรณีดีบัก

ฉันจัดการเพื่อใช้เว็บเซิร์ฟเวอร์ของ PHP บน OS X การคัดลอกไปยังไดเร็กทอรีชั่วคราว / www ไม่ได้ผลสำหรับฉัน Python SimpleHTTPServer บ่นว่าต้องการอ่านประเภท MIME ซึ่งอาจเป็นปัญหาเกี่ยวกับแซนด์บ็อกซ์

นี่คือเซิร์ฟเวอร์ที่ใช้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 วิธีแก้ปัญหาเป็นสิ่งที่ดี ฉันต้องการเปลี่ยนแปลงเล็กน้อย แต่ไม่รู้จะเปลี่ยนอย่างไรในโพสต์ของคุณ ฉันจึงวางไว้ที่นี่หวังว่าคุณจะไม่รังเกียจ ขอบคุณ

ในกรณีที่คุณมีโฟลเดอร์ www มีไฟล์อื่น ๆ อีกมากมายเช่น png, css, js เป็นต้นจากนั้นคุณต้องคัดลอกไฟล์ทั้งหมดไปยังโฟลเดอร์ tmp / www ตัวอย่างเช่นคุณมีโฟลเดอร์ www ดังนี้:

จากนั้นใน 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)")
        }
    }
}

ไฟล์ฟังก์ชันURLForBuggyWKWebView8คัดลอกมาจาก @ 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
}

ลองใช้

[webView loadHTMLString:htmlFileContent baseURL:baseURL];

ดูเหมือนว่ามันยังใช้งานได้ ยัง.