Вы когда-нибудь задумывались, можно ли запустить собственный Javascript через наше приложение для iOS?

В этой статье будет показано, как запустить собственный Javascript на веб-странице, которую мы загрузили в нашем приложении для iOS.

Готовый код можно скачать здесь: blitzdex27/knowledge-base-resources-swift-series- at How-to-execute-custom-javascript-using-webkit (github.com)

Шаг 1 — Настройка WKWebView

import UIKit
import WebKit

class ViewController: UIViewController {

    private lazy var webView: WKWebView = {
        let config = WKWebViewConfiguration()
        let webView = WKWebView(frame: view.bounds, configuration: config)
        return webView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(webView)
    }

}

Шаг 2. Получите URL-адрес веб-страницы.

Вы можете использовать любую веб-страницу или сайт, например Google, Netflix или даже свою собственную веб-страницу, если WKWebView может их загружать.

В этой статье я буду использовать простую веб-страницу.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello world</h1>
    <h1>Hello world</h1>
    <h1>Hello world</h1>
    <h1>Hello world</h1>
    <h1>Hello world</h1>
</body>
</html>

Он находится на моем диске: «/Users/dexter/Desktop/knowledge-base-resources-swift-series-/sampleWebPage/index.html».

Шаг 3 — Загрузите URL-адрес

Поместите код в метод viewDidLoad.

let url = URL(string: "file:///Users/dexter/Desktop/Tests/web_coms/evaluateScript/sampleWebPage")
let request = URLRequest(url: url!)
webView.load(request)

Когда вы запустите приложение, оно будет выглядеть так:

Шаг 4 — Выполните Javascript!

Навигация по странице должна быть завершена, прежде чем мы оценим наш Javascript. В этом случае мы будем использовать протокол WKNavigationDelegate.

Чтобы оценить Javascript, мы можем использовать метод экземпляра WKWebView evaluateJavaScript(_:).

import UIKit
import WebKit

class ViewController: UIViewController {

    private lazy var webView: WKWebView = {
        let config = WKWebViewConfiguration()
        let webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        return webView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(webView)
        
        // Load url
        let url = URL(string: "file:///Users/dexter/Desktop/knowledge-base-resources-swift-series-/sampleWebPage/index.html")
        let request = URLRequest(url: url!)
        webView.load(request)
    }

}

extension ViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("document.body.style.backgroundColor = 'orange'")
    }
}

Когда вы запустите приложение, фон должен измениться на оранжевый. Обратите внимание, что измененный фон — это веб-страница, а не веб-представление.

Заключение

Вот и все! Хотя я изменил здесь только цвет фона, вы можете выполнить любой Javascript, который вы можете выполнить в консоли браузера, доступ к которой вы можете получить только через настольные браузеры, открыв инструменты разработчика или F12.

Возможности ограничены только воображением.

В моей следующей статье я покажу, как приложение iOS может получать сообщения с веб-страницы. Да, вы правильно прочитали, сообщение с веб-страницы, а не из серверной части! В некоторых случаях это может пригодиться, например, если странице требуются некоторые свойства пользовательского интерфейса iOS для лучшего отображения пользовательского интерфейса веб-страницы на устройстве конечного пользователя.