web-dev-qa-db-ja.com

WKWebViewでローカルWebファイルとリソースをロードする

UIWebViewおよび以前のバージョンのWKWebView（iOS 10およびmacOS 10.12）とは異なり、ローカルファイルのデフォルトのロード操作はBundle.main.pathからBundle.main.urlに移動しました。同様に、loadFileURLもWKWebViewでローカルリソースをロードするデフォルトの関数になりました。

.pathと.urlはまったく異なり、両方とも過去に機能していたことを知っています– .pathは歴史的にデフォルトで選択された方法です。ただし、Swiftの最新バージョンは、すべてではないとしても、ほとんどの場合.pathソリューションを破損しているようです。 .pathソリューションは、今ではflattenディレクトリ階層であり、すべてのCSS、JS、およびその他のサブディレクトリのコンテンツを1つの大きなディレクトリに入れているようです。これにより、WKWebViewがindex.htmlをロードしようとしたときに、たとえば、リンクされたサブフォルダースタイルシート（つまり、/css/style.css）でロードエラーが発生します。

多数の質問と数え切れないほどの不確実/壊れた答えを見つけた後、回避策なしでローカルリソース（リンクされたCSS/JSファイルを含む）をロードできるWKWebViewを実装するための迅速で痛みのないソリューションはありますか？

swiftcocoacocoa-touchwebkitwkwebview
14
Matt Swift

Swift 4、Xcode 9.3用に更新

このメソッドにより、WKWebViewは、リンクされたCSS、JS、および他のほとんどのファイルのディレクトリおよびサブディレクトリの階層を適切に読み取ることができます。あなたはあなたのHTML、CSSまたはJSコードを変更する必要はありませんではなく.

ソリューション（クイック）

  1. Webフォルダーをプロジェクトに追加します（[ファイル]> [プロジェクトにファイルを追加]）
    • 必要に応じてアイテムをコピーする
    • フォルダー参照を作成する*
    • ターゲットに追加する（該当する）

  2. 次のコードをviewDidLoadに追加し、必要に応じてパーソナライズします。

    let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!
webView.loadFileURL(url, allowingReadAccessTo: url)
let request = URLRequest(url: url)
webView.load(request)

ソリューション（詳細）

ステップ1

ローカルWebファイルのフォルダーをプロジェクトの任意の場所にインポートします。次のことを確認してください。

Xcode > File > Add Files to "Project"

needed️必要に応じてアイテムをコピーする

☑️フォルダー参照の作成（「グループの作成」ではない）

targets️ターゲットに追加

ステップ2

WKWebViewを使用してView Controllerに移動し、viewDidLoadメソッドに次のコードを追加します。

let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!
webView.loadFileURL(url, allowingReadAccessTo: url)
let request = URLRequest(url: url)
webView.load(request)
  • index –ロードするファイルの名前（.html拡張子なし）
  • website – Webフォルダの名前（index.htmlはこのディレクトリのルートにある必要があります）

結論

全体的なコードは次のようになります。

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        webView.uiDelegate = self
        webView.navigationDelegate = self

        let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "Website")!
        webView.loadFileURL(url, allowingReadAccessTo: url)
        let request = URLRequest(url: url)
        webView.load(request)
    }

}

このメソッドまたはコードについてさらに質問がある場合は、できる限りお答えします！

43
Matt Swift

私のためのこの作品：

        WKWebView *wkwebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];
        wkwebView.navigationDelegate = self;
        wkwebView.UIDelegate = self;
        [wkwebView.configuration.preferences setValue:@"TRUE" forKey:@"allowFileAccessFromFileURLs"];
        NSURL *url = [NSURL fileURLWithPath:YOURFILEPATH];
        [wkwebView loadFileURL:url allowingReadAccessToURL:url.URLByDeletingLastPathComponent];
        [self.view addSubview:wkwebView];
2
Zouhair Sassi