WKWebView:如何在加载本地HTML时向html插入文本
WKWebView:如何在加载本地HTML时向html插入文本
提问于 2018-10-22 07:15:04
当使用WKWebView加载本地HTML文件(不是在线资源)时，我需要传入一些变量。标题索引完全正确，由上一页的tableView索引路径确定，如下图所示。
我似乎有个css问题：Insert CSS into loaded HTML in UIWebView / WKWebView
还有别的办法吗？
比如Java的模板语法或Python的Jinja2语法。
以下是html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<h3>
如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
</body>
</html>要插入的<h3>标记的内容
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-23 06:14:43
如果完全控制HTML文件，则可以插入要插入值的占位符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<h3>
@@index@@ 如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
</body>
</html>然后，您可以将HTML内容加载到String中，并在将WKWebView加载到WKWebView之前用值替换占位符。
if let filepath = Bundle.main.path(forResource: "content", ofType: "html") {
do {
let rawHtmlString = try String(contentsOfFile: filepath)
let htmlString = rawHtmlString.replacingOccurrences(of: "@@index@@", with: "17.")
webView.loadHTMLString(htmlString, baseURL: nil)
} catch {
// contents could not be loaded
}
}如果不能插入占位符，并且必须按原样使用HTML文件，则可以按如下方式插入值：
if let filepath = Bundle.main.path(forResource: "content", ofType: "html") {
do {
let rawHtmlString = try String(contentsOfFile: filepath)
// get the ranges of the h3 tags
if let h3OpeningTagRange = rawHtmlString.range(of: "<h3>"), let h3ClosingTagRange = rawHtmlString.range(of: "</h3>") {
// get the text inbetween the h3 tags
let h3Content = rawHtmlString[h3OpeningTagRange.upperBound..<h3ClosingTagRange.lowerBound]
// build the new html string
let htmlString =
// everything until and including the <h3> tag
rawHtmlString[...h3OpeningTagRange.upperBound]
// the value you want to insert
+ "17. "
// the text inbetween the h3 tags
+ h3Content
// the rest of the hmtl including the </h3> tag
+ rawHtmlString[h3ClosingTagRange.lowerBound...]
webView.loadHTMLString(String(htmlString), baseURL: nil)
}
} catch {
// contents could not be loaded
}
}这将获取打开的<h3>标记的范围和结束的</h3>标记的范围，并使用这些范围构造HTML。
这并不是一种非常健壮的方法，但对于您的特殊情况，它可能是一个简单的解决方案。
Stack Overflow用户
发布于 2018-10-23 07:18:17
尝试将以下javascript附加到HTML中
"""
<script>
window.addEventListener('load', function () {
var h3Node = document.getElementsByTagName('h3')[0];
h3Node.innerHTML = "\(Your_desired_string_to_show)" + h3Node.innerHTML
});
</script>
"""样本输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<h3>
如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
</body>
</html>
<script>
window.addEventListener("load", function () {
var h3Node = document.getElementsByTagName("h3")[0];
h3Node.innerHTML = "17." + h3Node.innerHTML
});
</script>
奖金
如果您有多个这样的<h3>标记，并且希望根据它们对应的位置动态添加节号，请看下面的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<h3>
如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
<div>
<h3>
如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
<div>
<h3>
如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
<div>
<h3>
如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
<div>
<h3>
如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
<div>
<h3>
如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
<div>
<h3>
如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
<div>
<h3>
如何查询我购买的订单？
</h3>
<p>您好，请微信关注“中通创客”，点击右下角“我的”，选择“订单查询”查询订单信息。
</p>
</div>
</body>
</html>
<script>
window.addEventListener("load", function () {
var h3Nodes = document.getElementsByTagName("h3");
for (var index = 0; index < h3Nodes.length; index++) {
var h3Node = h3Nodes[index];
h3Node.innerHTML = (index+1) + "." + h3Node.innerHTML;
}
});
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52924069
复制相关文章
相似问题
腾讯云开发者
