Swift WKWebView 加载无 URL 的动态 HTML 字符串:解决相对路径资源问题
如果要在 WKWebView 中加载网络动态的 HTML 字符串而没有 URL,可以使用 WKWebView 的 loadHTMLString(:baseURL:) 方法来加载 HTML 代码。但是,由于没有 URL,动态 HTML 中的相对路径资源(如 CSS 和 JavaScript 文件)可能无法加载。为了解决这个问题,可以将动态 HTML 字符串中的相对路径资源转换为绝对路径资源。\n\n以下是一个详细的解决方案:\n\n1. 创建一个 WKWebView 实例并将其添加到视图中。\n\nswift\nimport WebKit\n\nlet webView = WKWebView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))\nview.addSubview(webView)\n\n\n2. 加载动态 HTML 字符串。\n\nswift\nlet htmlString = "<html><head><link rel='stylesheet' type='text/css' href='style.css'></head><body><h1>Hello, World!</h1><script src='script.js'></script></body></html>"\nlet baseURL = URL(fileURLWithPath: Bundle.main.bundlePath)\nwebView.loadHTMLString(htmlString, baseURL: baseURL)\n\n\n在上面的例子中,我们假设有一个名为 style.css 的 CSS 文件和一个名为 script.js 的 JavaScript 文件与动态 HTML 字符串位于相同的目录下。\n\n3. 在 WKNavigationDelegate 的 webView(:didFinish:) 方法中处理相对路径资源。\n\nswift\nextension ViewController: WKNavigationDelegate {\n func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {\n let script = "var links = document.getElementsByTagName('link'); for (var i = 0; i < links.length; i++) { var link = links[i]; var href = link.getAttribute('href'); if (href.startsWith('file://')) { continue; } link.href = 'file://' + location.pathname.replace('/index.html', '') + '/' + href; }"\n webView.evaluateJavaScript(script, completionHandler: nil)\n\n let script2 = "var scripts = document.getElementsByTagName('script'); for (var i = 0; i < scripts.length; i++) { var script = scripts[i]; var src = script.getAttribute('src'); if (src.startsWith('file://')) { continue; } script.src = 'file://' + location.pathname.replace('/index.html', '') + '/' + src; }"\n webView.evaluateJavaScript(script2, completionHandler: nil)\n }\n}\n\n\n在上面的代码中,我们使用 JavaScript 代码遍历和修改动态 HTML 中的链接和脚本标签的 href 和 src 属性。这样,相对路径资源将被转换为绝对路径资源。\n\n4. 设置 WKWebView 的导航代理,并在视图控制器中实现 WKNavigationDelegate 协议。\n\nswift\nwebView.navigationDelegate = self\n\n\n这样,当 WKWebView 加载完成时,代理方法 webView(_:didFinish:) 将被调用,并且我们可以在该方法中处理相对路径资源。\n\n请注意,这只是一种解决方案,适用于动态 HTML 中的相对路径资源位于与 HTML 字符串相同的目录下的情况。如果相对路径资源位于其他目录或 URL 上,则需要根据实际情况进行相应的修改。
原文地址: https://www.cveoy.top/t/topic/pSs6 著作权归作者所有。请勿转载和采集!