正文

iOS如何轻松调用页面JS代码，实现手机网页互动功能

/0 浏览量
0411

在iOS应用开发中，有时候我们需要在原生应用中嵌入网页，并与网页上的JavaScript（JS）代码进行交互。这可以让我们结合原生应用的性能和用户体验与Web内容的丰富性。以下是一些实现iOS应用调用页面JS代码的方法。

使用WKWebView

iOS中提供了一个叫做WKWebView的类，它是WebKit框架的一部分，允许你在一个视图控制器中嵌入网页。通过WKWebView，你可以轻松调用页面中的JS代码。

1. 添加WKWebView到你的界面

首先，在你的ViewController中添加一个WKWebView：

import UIKit
import WebKit

class ViewController: UIViewController {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
    }

    func setupWebView() {
        webView = WKWebView(frame: view.bounds)
        view.addSubview(webView)
    }
}

2. 加载网页

你可以通过加载一个URL来在WKWebView中显示网页：

let url = URL(string: "https://www.example.com")!
webView.load(URLRequest(url: url))

3. 调用JS代码

一旦网页加载完成，你可以使用evaluateJavaScript方法来调用页面上的JS函数：

webView.evaluateJavaScript("document.title", completionHandler: { (result, error) in
    if let error = error {
        print("Error: \(error)")
        return
    }
    if let result = result as? String {
        print("Page title: \(result)")
    }
})

4. 向JS代码发送消息

如果你的页面中有一个可以通过JS调用的函数，你可以这样发送消息：

webView.evaluateJavaScript("showAlert('Hello from iOS!')", completionHandler: { (result, error) in
    if let error = error {
        print("Error: \(error)")
        return
    }
})

在网页的JS代码中，你需要定义一个函数来处理这个调用：

function showAlert(message) {
    alert(message);
}

使用UIWebView

UIWebView是WKWebView的旧版本，但它仍然可用。以下是如何使用UIWebView调用JS代码的例子：

1. 添加UIWebView到你的界面

import UIKit

class ViewController: UIViewController {
    var webView: UIWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
    }

    func setupWebView() {
        webView = UIWebView(frame: view.bounds)
        view.addSubview(webView)
    }
}

2. 加载网页

let url = URL(string: "https://www.example.com")!
webView.loadRequest(URLRequest(url: url))

3. 调用JS代码

webView.stringByEvaluatingJavaScript(from: "document.title") { result, error in
    if let error = error {
        print("Error: \(error)")
        return
    }
    if let result = result as? String {
        print("Page title: \(result)")
    }
}

4. 向JS代码发送消息

webView.stringByEvaluatingJavaScript(from: "showAlert('Hello from iOS!')") { result, error in
    if let error = error {
        print("Error: \(error)")
        return
    }
}

在网页的JS代码中，你需要定义一个函数来处理这个调用：

function showAlert(message) {
    alert(message);
}

总结

通过以上方法，你可以在iOS应用中轻松地调用页面中的JS代码，实现与网页的互动。WKWebView是现代iOS开发的首选，因为它提供了更多的功能和更好的性能。无论使用哪种方法，确保在调用JS代码时处理好错误处理，以确保应用的稳定性。

-- 展开阅读全文 --