Làm việc với WebView sử dụng WKWebView phần 2

Hướng Dẫn Can Thiệp Vào Nội Dung Hiển Thị Trên WebView

Tiếp tục bài viết về chủ đề WKWebView trước , nếu bạn nào chưa biết cách tạo một WebView thì xem lại bài viết Làm việc với WebView sử dụng WKWebView phần 1 để biết cách làm nhé.

Còn trong bài viết này mình sẽ hướng dẫn cách để can thiệp vào nội dung hiển thị lên WebView.

Bài viết này sẽ hướng dẫn cách Ẩn đi một số nội dung ở Header và Footer của trang web

Mình sẽ sử dụng lại project trong bài hướng dẫn lần trước

Bước 1 . Khai báo đối tượng WKUserContentController

Đối tượng WKUserContentController này sẽ cung cấp cho chúng ta can thiệp Javascript và cho phép ta truyền một hay nhiều đoạn script vào web page.

private var userContentController : WKUserContentController!

Bước 2. Modify hàm loadView

Chúng ta sẽ thêm 2 dòng code vào hàm loadView mà chúng ta đã override

override  func  loadView() {

      userContentController = WKUserContentController()   // Dòng thứ 1 

      let webConfiguration = WKWebViewConfiguration()

      webConfiguration.userContentController  =  userContentController   //Dòng thứ 2

      webView = WKWebView(frame: .zero, configuration: webConfiguration)

      webView.uiDelegate = self

      view = webView

 }

Thì mục đích của 2 dòng đó là để cấu hình webView , cho phép chúng ta can thiệp vào Javascript thôi.

Bước 3. Add func loadPage

Chúng ta sẽ xoá 3 dòng code thực hiện load page từ URL trong viewDidLoad đi, ở đây ta sẽ tạo một hàm thực hiện loadPage với tham số truyền vào là một URL string :

func  loadPage( urlString:String) {

let  userScript =  WKUserScript(source: scriptWithDOMSelector(), injectionTime:WKUserScriptInjectionTime.atDocumentEnd,

                                                                                                                                                                              forMainFrameOnly:true\)

      userContentController.addUserScript( userScript )

      let  url =URL(string: urlString)!

      webView.load(URLRequest(url: url))

 }

userScript là đoạn script mà chúng ta sẽ truyền vào Web Page, ở đây source : scriptWithDOMSelector(), thì source này chính là nơi ta thực hiện nhưng điều mình muốn hiện lên trên WebView đấy.

Bước 4. Ẩn Footer của trang web

Để ẩn footer của Web đi ta sẽ thực hiện bên trong hàm scriptWithDOMSelector() như sau :

func  scriptWithDOMSelector() -> String {

          var script = "$( 'footer' ).hide(); "

          return script

 }

Sau khi thêm hàm, hãy Run và kiểm tra , chắc chắn Footer đã biến mất ^^

Tương tự các bạn có thể đổi màu , ẩn hoặc hiện một số thành phần trong web rất dễ. Hãy practice để hiểu rõ hơn nhé các bạn

Bên dưới là Source Code

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {

    var webView: WKWebView!
    private var userContentController: WKUserContentController!

    override func loadView() {
        userContentController = WKUserContentController()

        let webConfiguration = WKWebViewConfiguration()
        webConfiguration.userContentController = userContentController


        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()

        loadPage(urlString: "https://www.apple.com")
    }

    func loadPage(urlString: String) {
      //  userContentController.removeAllUserScripts()

        let userScript = WKUserScript(source: scriptWithDOMSelector(),
                                      injectionTime: WKUserScriptInjectionTime.atDocumentEnd,
                                      forMainFrameOnly: true)

        userContentController.addUserScript(userScript)

        let url = URL(string: urlString)!
        webView.load(URLRequest(url: url))
    }

    func scriptWithDOMSelector() -> String {
       var script = "document.querySelector('footer, #top-modules, #column-right').innerHTML ='';"

        return script
    }

}

Người viết : Nguyễn Khánh Hưng