iOS webview与js交互

最新推荐文章于 2024-05-27 09:45:43 发布

海阔任月飞

最新推荐文章于 2024-05-27 09:45:43 发布

阅读量8.9k

点赞数 2

本文链接：https://blog.csdn.net/yaojinhai06/article/details/89945460

版权

oc与js交互同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

swift与js交互

1 篇文章 0 订阅

订阅专栏

webview与js交互

1 篇文章 0 订阅

订阅专栏

WebView是显示网页的主要控件，在实际工作共经常会用到，尤其是当需要与用户有交互的时候，就会用到js，对于不太熟悉js的同事来说可能有点蒙，我们今天就来总结一下webview与js交互功能。

iOS12以后的版本不在支持UIWebView，用WebKit库来代替了，我们在这里只讨论WKWebView。我们先来看下WebKit常用的几个类：

WKWebViewConfiguration配置webview的一些属性
WKUserScript注入js脚本
WKUserContentController与js交互的代理
WKPreferences一些偏好设置
WKWebView显示网页H5

我们通过一个demo来看下。文章最后附上demo链接。

xcode版本：Version 10.1 (10B61) 语言：swift 4.2

原生控件调用js函数

        let config = WKWebViewConfiguration();
        let preferences = WKPreferences();
        preferences.javaScriptEnabled = true;
        preferences.javaScriptCanOpenWindowsAutomatically = false;
        preferences.minimumFontSize = 16;
        config.preferences = preferences;
        
        let userContent = WKUserContentController();
        userContent.add(self, name: "jsFunc");
        config.userContentController = userContent;
        
        webView = WKWebView(frame: self.view.bounds, configuration: config);
        let url = Bundle.main.url(forResource: "TestHTML", withExtension: "html", subdirectory: "html");
        webView.load(URLRequest(url: url!));
        view.addSubview(webView);

首先创建一个web网页，我们打开执行脚本属性javaScriptEnabled设置为true，然后创建一个原生的按钮

        let buttn = UIButton(frame: .init(x: 20, y: self.view.frame.height - 100, width: self.view.frame.width - 40, height: 40));
        buttn.setTitle("原生按钮 添加文字", for: .normal);
        buttn.backgroundColor = UIColor.orange;
        buttn.addTarget(self, action: #selector(sendMesageJS), for: .touchUpInside);
        view.addSubview(buttn);

调用如下函数：

    @objc func sendMesageJS() -> Void {
        webView.evaluateJavaScript("insertTextToHTML()") { (result, error) in
            
        };
    }

接下来我们看html网页和js:

先创建一个HTML网页：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="TestCSS.css" />
		<title>css</title>
		<script type="text/javascript" src="TestJS.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=false" />
	</head>

	<body>

		<button type="button" onclick="jsSendMessage()">网页按钮 发送js消息</button>


	</body>

</html>

然后在创建一个js脚本：

function insertTextToHTML(){
    var body = document.getElementsByTagName('body');
    let p = document.createElement('p');
    p.innerText = "我是来自swift调用";
    body[0].appendChild(p);
    
}

我们swift的button也就是原生的按钮调用的函数必须和注册到js的函数是一直的我们这个函数也可以动态注册，如下的写法：

    func registerJS() -> String {
        let js = """

function insertTextToHTML(){
    var body = document.getElementsByTagName('body');
    let p = document.createElement('p');
    p.innerText = "通过注册 我是来自swift调用";
    body[0].appendChild(p);
    
}
""";
        return js;
        
    }

在配置webview上加上下面一句：

let js = WKUserScript(source: registerJS(), injectionTime: .atDocumentEnd, forMainFrameOnly: false);
userContent.addUserScript(js);

我们就可以直接用我们注册到js的函数了。

js发送消息。

我们配置webview的时候有userContent.add(self, name: "jsFunc");这么一段代码，这个是注册一个方法的名字。我们再来看js代码:

function jsSendMessage() {
    window.webkit.messageHandlers.jsFunc.postMessage("js发送消息给Swift");
}

这一段是js代码。我们必须保证window.webkit.messageHandlers.jsFunc.postMessage的函数名字必须和注册时的名字一样，这样我们才能正确的发送消息。

我们需要实现WKUserContentController代理如下：

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        
        let mesg =  message.body as! String;
        let alert = UIAlertController(title: "提示", message: "swift收到js的信息：\n\(mesg)", preferredStyle: .alert);
        alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (action) in
            
        }));
        present(alert, animated: true) {
            
        };
    }

这样就可以js发送给swift，swift也可以正确接收了。

如果有不懂的地方欢迎来讨论。成功的路上永远不缺少努力的人。

最后放上demo地址

海阔任月飞

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
iOS webview与js交互

WebView是显示网页的主要控件，在实际工作共经常会用到，尤其是当需要与用户有交互的时候，就会用到js，对于不太熟悉js的同事来说可能有点蒙，我们今天就来总结一下webview与js交互功能。iOS12以后的版本不在支持UIWebView，用WebKit库来代替了，我们在这里只讨论WKWebView。我们先来看下WebKit常用的几个类：WKWebViewConfigur...
复制链接

扫一扫