在 WKWebView (iOS, Swift) 中使用本地 Javascript 源加载本地 HTML答案

【问题标题】：Loading local HTML with local Javascript Sources in a WKWebView (iOS, Swift)在 WKWebView (iOS, Swift) 中使用本地 Javascript 源加载本地 HTML
【发布时间】：2018-11-03 15:58:02
【问题描述】：

我正在尝试在 iOS 应用程序 (Swift 4.2) 的 WKWebView 中加载本地 html 文件。不幸的是，这个本地文件包含似乎没有被执行的 javascript 代码。

下面是这个html文件（取自https://www.verovio.org/tutorial.xhtml?id=topic00）：

<html>
    <head>
        <title>Verovio Hello World! example</title>
        <script src="verovio-toolkit.js" type="text/javascript" ></script>
        <script src="jquery-3.1.1.min.js" type="text/javascript" ></script>
    </head>
    <body>
        Hello World!
        <div id="svg_output"/>
        <script type="text/javascript">
            var vrvToolkit = new verovio.toolkit();
            $.ajax({
               url: "Beethoven_StringQuartet_op.18_no.2.mei"
               , dataType: "text"
               , success: function(data) {
               var svg = vrvToolkit.renderData(data);
               $("#svg_output").html(svg);
               }
               });
        </script>
    </body>
</html>

以及下面用swift编写的视图控制器文件：

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: "html")!
        webView.loadFileURL(url, allowingReadAccessTo: url)
    }
}

文件位于项目属性的“构建阶段/复制捆绑资源”下的本地文件。我也尝试将它们放在一个目录中，但没有任何成功。在项目内部的文件组织下方。

编辑：当我将 html 文件中的 url 从 Beethoven.mei 更改为 https://www.verovio.org/gh-tutorial/mei/Beethoven_StringQuartet_op.18_no.2.mei（相同的文件，但在 Verovio 的网站上）时，一切正常！！

所以：

本地 .js 资源工作正常
问题来自 jquery 无法加载本地文本文件

知道如何让 jquery 能够加载本地文件吗？

谢谢！

【问题讨论】：

标签： javascript html ios swift xcode

【解决方案1】：

根据docs，loadFileURL这样做：

如果readAccessURL 引用单个文件，WebKit 只能加载该文件。如果readAccessURL 引用了一个目录，那么该文件中的文件可能会被 WebKit 加载。

你得到的url是一个文件的url，即HTML文件。您需要目录的 url。您可以致电deletingLastPathComponent：

webView.loadFileURL(url, allowingReadAccessTo: url.deletingLastPathComponent())

【讨论】：

感谢您的回答，但问题似乎来自 jquery，请参阅我的编辑。我试过你的想法，不幸的是没有成功:)

【解决方案2】：

首先检查您的index.html 文件是否有 js 的 scr 路径。如果像下面这样，这意味着 js 文件包含在 js 文件夹中。所以你需要在添加到项目时添加对该文件夹的引用。

<script src="js/jquery.js"></script>

然后像下面这样获取主资源路径

let path = Bundle.main.resourcePath! + "/\(folderName)/\(fileName)"
print("path:=",path )

之后将该文件加载到 webView

do {
    let contents =  try String(contentsOfFile: path, encoding: .utf8)
    let baseUrl = URL(fileURLWithPath: path)
    webView.loadHTMLString(contents as String, baseURL: baseUrl)
} catch {
    print ("File HTML error")
}

【讨论】：

感谢您的回答，但问题似乎来自 jquery，请参阅我的编辑。再次感谢！
@Maxime 现在你可以试试 let path = Bundle.main.resourcePath！ + "/html/index.html"
我测试只是为了确保我没有遗漏任何东西，但这并不能解决问题，正如我在编辑中所解释的那样。再次感谢您

【解决方案3】：

您可以使用loadHTMLString方法加载HTML，如下：

let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "html")!
do {
    let html = try String(contentsOf: url)
    webView.loadHTMLString(html, baseURL: url.deletingLastPathComponent())
} catch ....

baseURL 指向文件系统中的应用程序目录。您可以在script 标签的src 属性中写入被解释为相对于baseURL 的相对位置。

【讨论】：