LoginSignup
4
6

More than 5 years have passed since last update.

WKWebView で表示前に CSS を適用

Last updated at Posted at 2019-03-14

WKWebView で表示したものをいじりたい場合、値を取得したい場合などは、以下で JavaScript を実行すればよいです。

func evaluateJavaScript(_ javaScriptString: String, completionHandler: ((Any?, Error?) -> Void)? = nil)

ただ、上記の実行は、表示が完了してからでないとできません。
例えば、消したい要素がある場合、一瞬表示されてから消えることになります。

対応策

下記のようにすることで、上述の問題は発生しません。
例えば、消したい要素がある場合、最初から消されて表示されます。

let script = WKUserScript(source: "JavaScriptコード", injectionTime: .atDocumentEnd, forMainFrameOnly: true)

// 既に WKWebView インスタンス生成済み
webView.configuration.userContentController.addUserScript(script)

// WKWebView インスタンス生成時に適用
let controller = WKUserContentController()
controller.addUserScript(script)
let configuration = WKWebViewConfiguration()
configuration.userContentController = controller
let webView = WKWebView(frame: view.bounds, configuration: configuration)

JavaScriptコード 部分は各自でお願いします。
例えば下記のような感じです。

JavaScript
var element = document.querySelector('.classname');
element.style['margin-top'] = '0';

参考

CSS の操作で、 display: none; にしたいだけであれば、 WKContentRuleListStore を使用したほうが良いのかなと思います。簡単ですし。

詳しくは下記の記事をご参考にどうぞ。
https://qiita.com/ShingoFukuyama/items/d9b7dd86a9a4bfdc6b22

環境

  • Swift 4.2

参照

4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6