Question

我正在尝试在WKWebView中为iOS应用程序加载本地html文件（Swift 4.2）。不幸的是，此本地文件包含似乎未执行的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>

并迅速编写以下视图控制器文件：

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文件中的网址从Beethoven.mei更改为https://www.verovio.org/gh-tutorial/mei/Beethoven_StringQuartet_op.18_no.2.mei（相同文件，但在Verovio网站上）时，一切正常！

所以：

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

关于如何使jquery能够加载本地文件的任何想法？

谢谢！

M。

Answer 1

首先检查您的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")
}

Answer 2

根据docs，loadFileURL执行此操作：

如果readAccessURL引用一个文件，则WebKit只能加载该文件。如果readAccessURL引用目录，则WebKit可能会加载该文件中的文件。

您获得的url是文件的URL，即HTML文件。您需要目录的URL。您可以通过调用deletingLastPathComponent：

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

Answer 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指向文件系统中的应用程序目录。您可以在src标记的script属性中编写相对位置，该位置被解释为相对于baseURL。

在WKWebView（iOS，Swift）中使用本地Javascript源加载本地HTML

3 个答案: