在WKWebView（iOS，Swift）中加载本地HTML和本地Javascript源码

Question

在WKWebView（iOS，Swift）中加载本地HTML和本地Javascript源码

3

我将尽力为您进行翻译。以下是需要翻译的内容：

我正在尝试在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)
    }
}

文件在项目属性的“Build Phases/Copy Bundle Resources”下是本地文件。我也试图将它们放在一个目录中，但没有成功。以下是项目内的文件组织。

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

所以：

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

有什么想法可以使jquery能够加载本地文件吗？

谢谢！

M.

- Maxime

3个回答

1

根据文档，loadFileURL的作用如下：

如果readAccessURL引用单个文件，则只有该文件可以被WebKit加载。如果readAccessURL引用目录，则该目录中的文件可以被WebKit加载。

你得到的url是一个文件的url，即HTML文件的url。你需要目录的url。你可以通过调用deletingLastPathComponent来实现：

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

- Sweeper

谢谢您的回答，但问题似乎来自于jquery，详见我的编辑。我尝试了您的想法，但不幸的是没有成功 :) - Maxime

0

您可以使用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指向您在文件系统中的应用目录。您可以在

- מתניה אופן

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hitesh · Accepted Answer

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