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

Posted 2023-02-23

技术标签:

【中文标题】在 WKWebView (iOS, Swift) 中使用本地 Javascript 源加载本地 HTML【英文标题】：Loading local HTML with local Javascript Sources in a WKWebView (iOS, Swift) 【发布时间】：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 能够加载本地文件吗？

谢谢！

【问题讨论】：

【参考方案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 的相对位置。

【讨论】：

以上是关于在 WKWebView (iOS, Swift) 中使用本地 Javascript 源加载本地 HTML的主要内容，如果未能解决你的问题，请参考以下文章

在 iOS 10 + Swift 3 中以编程方式在我的 WKWebView 上方添加 UILabel

swift iOS 11.2 WKWebView 不显示

swift 笔记：iOS与JavaScript的交互（三）：WKWebView 1.新建WKWebView加载本地，远程页面

swift [初学者来自iOS中WKWebView的简单浏览器] Chp6的青铜挑战程序设计查看Big Nerd Ranch #tags：swift3，ios，UIView，WKWebview

swift - UIWebView 和 WKWebView(iOS12 之后替换UIWebView)