iOS与JS(一):使用URL拦截的方式进行JS与OC互相调用

2017-09-07 田超

关于 WKWebViewUIWebView 之间的区别,本文就不在说明,本文只使用 WKWebView

效果图如下:

html代码:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
        <script language="javascript">
            function loadURL(url) {
                window.location.href = url
            }
            
            function locationClick() {
                loadURL("scheme://getLocation");
            }
            
            function shake() {
                loadURL("scheme://shake");
            }
            
            function setLocation(location) {
                alert(location)
                document.getElementById("returnValue").value = location;
            }
            
        </script>
    </head>
    
    <body>
        <h1>这是按钮调用</h1>
        <input type="button" value="获取定位" onclick="locationClick()" /><br><br>
        <input type="button" value="震动一下" onclick="shake()" /><br><br>
        
        <h1>这是文件上传</h1>
        <input type="file" /><br><br>
        
        <h1>这是回调结果展示区</h1>
        <textarea id ="returnValue" type="value" rows="5" cols="50"></textarea>
        
    </body>
</html>

以获取定位这个按钮为例说明OC和JS互相调用代码执行流程:

  1. 初始化 WKWebView 加载本地html文件。
  2. 点击web中的按钮,web发起URL请求。
  3. URL请求被 WKNavigationDelegate 中的代理方法拦截。根据自定义的URL识别使用不同的处理方式。如:在 - (void)getLocation 方法中调用JS的 setLocation 函数。
  4. JS的 setLocation 函数执行JS的 alert() 函数,被 WKUIDelegate 中的代理方法捕获,调用iOS原生的弹框。

用户评论
开源开发学习小组列表