通过 WKWebView 应用于 Javascript 的样式表在模拟器上工作，在设备上失败
Posted
技术标签:
【中文标题】通过 WKWebView 应用于 Javascript 的样式表在模拟器上工作，在设备上失败【英文标题】：Stylesheet applied to Javascript via WKWebView works on simulator, fails on device 【发布时间】：2018-08-28 21:37:50 【问题描述】：通过以下设置，我可以在模拟器上运行我的应用程序，并且样式表已正确应用于内容。但是，在设备上运行完全相同的代码会导致样式表被忽略。
我如何设置我的WKWebView：
let contentController = WKUserContentController()
let userScript = WKUserScript(source: "my script goes here",
injectionTime: .atDocumentStart,
forMainFrameOnly: false)
contentController.addUserScript(userScript)
let configuration = WKWebViewConfiguration()
configuration.userContentController = contentController
webView = WKWebView(frame: .zero, configuration: configuration)
// Finish setting up & running web view here
对于上述部分，将injectionTime 更改为.atDocumentEnd 并将forMainFrameOnly 更改为true 无效。
还有一个简化的 index.html 文件，它非常空：
<html>
<head>
<title>Style This Page</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body onload="runScript()">
<div id="scriptAttachesHere"></div>
<script>
let script
window.onload = function()
let options =
script = new window.SCRIPT.Name(document.getElementById('scriptAttachesHere'), options);
</script>
</body>
</html>
还有来自样式表的一段代码：
.script-container .devices .contentContainer::before height: unset !important;
所有名字都被屏蔽了，所以我可能做错了。
【问题讨论】：
【参考方案1】：所以事实证明这是相当直接的。
Apple 不赞成将本地文件加载到 WKWebView，因此我通过将我的样式表直接合并到我的 HTML 代码中来解决这个问题，而不是一个独立的样式表。
<html>
<head>
<title>Style This Page</title>
</head>
<style>
.script-container .devices .contentContainer::before height: unset !important;
</style>
<body onload="runScript()">
<div id="scriptAttachesHere"></div>
<script>
let script
window.onload = function()
let options =
script = new window.SCRIPT.Name(document.getElementById('scriptAttachesHere'), options);
</script>
</body>
</html>
注意删除链接到本地样式表的代码。
【讨论】：
以上是关于通过 WKWebView 应用于 Javascript 的样式表在模拟器上工作，在设备上失败的主要内容，如果未能解决你的问题，请参考以下文章