WebView 使用链接的 JS 文件加载外部 HTML - Swift

Question

我正在尝试创建一个显示本地 HTML 文件 index.html 的 WebView，这个 HTML 文件有一个链接的 JS 外部文件 form.js，我创建了两个其中使用 VSCode 并且当运行使用 Live Server 时一切正常。但是当在 XCode 上构建和运行应用程序时，HTML 文件似乎工作正常，但我没有收到警报，也没有收到 JS 文件中定义的打印语句。这是我的代码运行:

Swift代码：

private func loadRequest() {
    let htmlPath = Bundle.main.path(forResource: "index", ofType: "html")
    guard let htmlPath = htmlPath else { return }
    let url = URL(fileURLWithPath: htmlPath)
    let request = URLRequest(url: url)
    webView.load(request)
}

HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
</head>
<body>
    <form>
        <div>
            <label>Name</label>
            <input>
        </div>
        <div>
            <label>Last Name</label>
            <input>
        </div>
        <div>
            <label>Date of birth</label>
            <input type="date" id="birthday" name="birthday">
        </div>
        <div>
            <button>Button1</button>
            <input>
        </div>
        <div>
            <button>Button2</button>
            <input>
        </div>
    </form>
    <script src="form.js"></script>
</body>
</html>

JS 文件

alert('test');
console.log("This is workig");

我已经将这两个文件导入到我的 XCode 项目中，它们位于应用程序的主文件夹中。所以我不确定我做错了什么，这是我第一次尝试构建这样的东西。拜托，任何人都可以帮助我吗？我一直在到处寻找解决方案，但我并不真正熟悉 HTML/JS 代码。提前致谢！ (:

Answer 1

您可以向 webView 提供 JavaScript 代码，但是，WKWebView 无法识别 JavaScript 的 'alert' 函数。这是一个可能的解决方法：

1-将脚本注入webView

2-使用webView的运行JavaScriptAlertPanelWithMessage方法接收告警信息

3- 显示警报消息

这是我用来测试您的 index.html 和 form.js 文件的代码：


import UIKit
import WebKit

class ViewController: UIViewController {

    var webView: WKWebView!
    
    var bundle: Bundle {
        return Bundle.main
    }

    var scriptString: String {
        if let path = bundle.path(forResource: "form", ofType: "js") {
            do {
                return try String(contentsOfFile: path)
            } catch {
                return ""
            }
        } else {
            return ""
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        let js = scriptString
        let script = WKUserScript(source: js, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
        
        config.userContentController.addUserScript(script)
        config.userContentController.add(self, name: "alert")
        
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.uiDelegate = self
        webView.navigationDelegate = self
        
        view.addSubview(webView)
        
        NSLayoutConstraint.activate([
            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            webView.topAnchor.constraint(equalTo: view.topAnchor),
            webView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        loadRequest()
        
    }
    
    private func loadRequest() {
        guard let url = bundle.url(forResource: "index", withExtension: "html") else { return }
        webView.loadFileURL(url, allowingReadAccessTo: url)
                
    }

}

extension ViewController: WKScriptMessageHandler, WKUIDelegate, WKNavigationDelegate {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

    }
    
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo) async {
        
        let alert = UIAlertController(title: "Alert", message: message, preferredStyle: .alert)
        let action = UIAlertAction(title: "Ok", style: .default) { ac in
            // Do something
        }
        alert.addAction(action)
        present(alert, animated: true, completion: nil)
    }
}

输出：

更多信息：

WKUserScript not working

iOS WKWebView not showing javascript alert() dialog

WebView 使用链接的 JS 文件加载外部 HTML - Swift

WebView load external HTML with linked JS File - Swift

javascript

xcode

webview

ios

swift