当前位置： 移动技术网 > 移动技术>移动开发>IOS > js与ios交互，使用WebViewJavascriptBridge

js与ios交互，使用WebViewJavascriptBridge

2018年09月12日  | 移动技术网移动技术  | 我要评论

js与ios交互，使用webviewjavascriptbridge。

<pre class="brush:java;">   <button>点我</button>
    <input value="" id="res" type="text"></pre><p></p>
<pre class="brush:java;"></pre>
<strong>js端：</strong><br>
<br>
<p></p>
<p>1，固定代码放js里：</p>
<p></p><pre class="brush:java;">        function setupwebviewjavascriptbridge(callback){
        if (window.webviewjavascriptbridge) { return callback(webviewjavascriptbridge); }
        if (window.wvjbcallbacks) { return window.wvjbcallbacks.push(callback); }
        window.wvjbcallbacks = [callback];
        var wvjbiframe = document.createelement('iframe');
        wvjbiframe.style.display = 'none';
        wvjbiframe.src = 'wvjbscheme://__bridge_loaded__';
        document.documentelement.appendchild(wvjbiframe);
        settimeout(function() { document.documentelement.removechild(wvjbiframe) }, 0)
        }</pre><br>
<br>
2，封成函数方便后面交互时调用：<pre class="brush:java;">nativeinteractive=function(fn,obj){
    setupwebviewjavascriptbridge(function(bridge) {
             if(obj){
                  bridge.callhandler('webview_call_native', obj, function(response) {});
             }
             bridge.registerhandler('native_call_webview', function(data,response) {
                  fn(data);
             })
        }); 
   }</pre><pre class="brush:java;"><pre class="brush:java;">native_call_webview是要接受ios端参数的函数名；<pre class="brush:java;">webview_call_native是要传参给ios的参数名；</pre><p></p>
<pre class="brush:java;"></pre>
这两个名字要与ios端协商好；
<pre class="brush:java;"></pre>
3，调用：
<p></p>
<p></p><pre class="brush:java;">$("button").click(function(){
        var native=function(data){//ios向js传参是data
            if(data.say=="yes"){
                $("#res").val(data.iossay);
            }
            responsecallback({'jssay': 'yes'});//回复ios
        }
         var requesth5={//向ios传参
            user_id:"js001",
                    jssay:"can you hear me?"   
                 }
        nativeinteractive(native,requesth5);
    })</pre><br>
<br>
<p></p>
<p><br>
</p>
    
<p></p>                     </pre></pre>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网