WKWebView charge les ressources à partir du dossier de documents local

Dans ma Swift application iOS, je veux télécharger des pages HTML dynamiques à partir d'un serveur distant, de les enregistrer dans le répertoire du document, et l'affichage de ces pages de répertoire de documents.

J'ai été en utilisant ce pour charger la page:

var appWebView:WKWebView?
...
appWebView!.loadRequest(NSURLRequest(URL: NSURL(fileURLWithPath: htmlPath)))

Tout fonctionne sur le simulateur, mais quand j'ai déménagé à de vrais téléphones, il a juste montré une page vierge. J'ai ensuite connecté à l'application à l'aide de Safari, et a trouvé qu'il s'en est plainte à "Échec du chargement de la ressource".

J'ai ensuite essayé de lire d'abord le contenu de la page à htmlPathpuis utilisez

appWebView!.loadHTMLString()

pour charger la page. Il fonctionne lorsque la page HTML est simple. Mais si les références HTML quelque chose d'autre, c'est à dire un fichier JavaScript aussi dans le répertoire du document (avec un chemin absolu comme <script src="file:////var/mobile/Containers/Data/Application/762035C9-2BF2-4CDD-B5B1-574A0E2B0728/Documents/xxxxx.js">), il ne parvient pas à charger.

Personne ne sait ce qui se passe, et comment résoudre le problème?

Plus d'infos:

XCode version: 7.3.1
Cible de déploiement: 8.1 (j'ai essayé d'utiliser 9.3 trop, mais cela n'a pas d'aide).

source d'informationauteur Peter

C'est une version simplifiée de ce que j'ai utilisé pour charger des fichiers locaux dans un projet de mine (iOS 10, Swift 3). Je viens de mis à jour mon code (7.5.2017) après les essais de nouveau sur iOS 10.3.1 et iPhone 7+ comme demandé par Raghuram et Fox5150 dans les commentaires.

Je viens de créer un tout nouveau projet, et c'est la structure de dossiers: WKWebView charge les ressources à partir du dossier de documents local

Mise à jour 19.04.2018: Ajouté une nouvelle fonctionnalité à télécharger .zip avec HTML, CSS, JS fichiers, décompressez-le dans /Documents/(Alamofire + Zip) et puis charger ces fichiers dans la webView. Vous pouvez le trouver dans la Exemple de projet GitHub. De nouveau, n'hésitez pas à fourche & star! 🙂

Mise à jour 08.02.2018: enfin ajouté une Exemple de projet GitHubqui comprend également un local fichier JavaScript. Hésitez pas à fourche & star! 🙂

Version 1 avec webView.loadFileURL()

ViewController.swift

import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        let webView = WKWebView()
        let htmlPath = Bundle.main.path(forResource: "index", ofType: "html")
        let htmlUrl = URL(fileURLWithPath: htmlPath!, isDirectory: false)
        webView.loadFileURL(htmlUrl, allowingReadAccessTo: htmlUrl)
        webView.navigationDelegate = self
        view = webView
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

Version 2 avec webView.loadHTMLString()

ViewController.swift

import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        let webView = WKWebView()
        let htmlPath = Bundle.main.path(forResource: "index", ofType: "html")
        let folderPath = Bundle.main.bundlePath
        let baseUrl = URL(fileURLWithPath: folderPath, isDirectory: true)
        do {
            let htmlString = try NSString(contentsOfFile: htmlPath!, encoding: String.Encoding.utf8.rawValue)
             webView.loadHTMLString(htmlString as String, baseURL: baseUrl)
        } catch {
            //catch error
        }
        webView.navigationDelegate = self
        view = webView
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

Pièges à regarder dehors pour:

Assurez-vous que votre local en html/js/css fichiers sont dans Project -> Cible> Phases de construction -> Copie Bundle de Ressources
Assurez-vous que vos fichiers html ne faisant pas référence à des chemins relatifs par exemple css/styles.css parce que iOS aplatissement de la structure de votre fichier et de styles.css sera au même niveau que index.html afin d'écrire <link type="text/css" href="styles.css"> au lieu

Donné les 2 versions et les astuces voici mon code html/css fichiers du projet:

web/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    <title>Offline WebKit</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1 id="webkit-h1">Offline WebKit!</h1>
  </body>
</html>

web/css/styles.css

#webkit-h1 {
  font-size: 80px;
  color: lightblue;
}

Si quelqu'un veut un GitHub exemple de projet, dites-moi dans la section des commentaires, et je vais le télécharger.

4

Swift 4 Méthode

Cette méthode permet WKWebView lire correctement votre hiérarchie de répertoires et sous-répertoires qui y sont liées fichiers CSS/JS. Vous ne PAS besoin de changer votre code HTML, CSS ou JS code.

Mise à jour de Xcode 9.3

Étape 1

Importer le dossier de web local les fichiers de n'importe où dans votre projet. Assurez-vous de:

☑️ Copier les éléments si nécessaire

☑️ Créer un dossier de références (pas de "Créer des groupes")

☑️ Ajouter aux objectifs

Étape 2

Aller à la Vue du Contrôleur avec le WKWebView et ajoutez le code suivant à la viewDidLoad méthode:
```
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 – le nom du fichier à charger (sans le .html extension)
- website – le nom de votre dossier web (index.html doit être à la racine de ce répertoire)
Conclusion

L'ensemble du code devrait ressembler à quelque chose comme ceci:
```
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)
    }

}
```
Si vous avez d'autres questions sur cette méthode ou le code, je vais faire de mon mieux pour y répondre. 🙂

Cette solution qui m'a aidé:

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

Cela fonctionne bien (Swift 3, Xcode, 8):

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!

    override func loadView() {
        webView = WKWebView()
        webView.navigationDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        if let url = Bundle.main.url(forResource: "file", withExtension: "txt")
        {
            do
            {
                let contents = try String(contentsOfFile: url.path)
                webView.loadHTMLString(contents, baseURL: url.deletingLastPathComponent())
            }
            catch
            {
                print("Could not load the HTML string.")
            }
        }
    }
}

Vous devez vous connecter pour publier un commentaire.

Version 1 avec webView.loadFileURL()

Version 2 avec webView.loadHTMLString()

Swift 4 Méthode

Étape 1

Étape 2

Conclusion