js和webview,Js和webview交互

本文目錄一覽：

• 1、android中webview與js交互
• 2、iOS下webView和JS交互
• 3、如何實現WebView和js頁面的交互
• 4、如何處理webview與js之間交互
• 5、WKWebView與JS的交互原理

android中webview與js交互

移動開發中，我們經常會遇到混合開發模式，經常是在移動客戶端中增加網頁，來減少客戶端的壓力，同時也讓軟體更加靈活。廢話少說，下面直接進入主題。

webView.getSettings().setAppCachePath(getCacheDir().getAbsolutePath());

webView.getSettings().setAppCacheEnabled(true);

if (Constant.DEBUG) {

webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

}

if (Build.VERSION.SDK_INT = Build.VERSION_CODES.LOLLIPOP) {

webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

}

//參數1 定義Android 與js交互的介面， 參數2 與js交互的一個常量，可以是任意一個常量字元串，

但是h5網頁調用的時候需要增加這個參數二：handler

public class JSInterface{

@JavascriptInterface//這個標註必須加上 表示js要調用的方法，可以自動識別

public void getShareInfo(String strings) {

//todo android dosomething

}

}

那麼 js端該如何調用這個方法呢\

android 和ios的調用方法不一樣 因此 h5裡面需要區別andorid和ios機型來分別調用移動端方法

如android：

//handler 是與android 約定的常量（最好做成全局通用的常量）

//getShareInfo 是與android 定義的調用方法

以上常量、方法、參數類型 必須一致才能成功調用

WebView提供兩個事件回調類給應用層，分別為WebViewClient,WebChromeClient開發者可以繼承

這兩個類，接手相應事件處理。WebViewClient 主要提供網頁載入各個階段的通知，比如網頁開始

載入onPageStarted，網頁結束載入onPageFinished等；WebChromeClient主要提供網頁載入過程

中提供的數據內容，比如返回網頁的title,favicon等。

有需要監聽載入網頁進度

//需要webBar的可以自定義增加一個webBar

最後，就是大家都知道的webView.loadUrl(url);//url需要載入的網頁

那麼，如何在android調用js的方法呢

//getMsg() 為js裡面暴露的方法

在銷毀的時候：

protected void onDestroy() {\

super.onDestroy();\

if (webView != null) {\

webView.loadUrl(“about:blank”);\

webView.destory();\

}\

}

iOS下webView和JS交互

下面說一下使用方法

申明一個繼承於NSObjectt的class, 並實現你的protocol

最後，通過UIWebView的特性，獲取JSContext,並將我們的function注入到上下文

看起來很方便吧，app – JS 也很方便

WKWebView關鍵詞

WKUIDelegate 基於JS系統的幾個內部方法 實現一下方法要調用對應的completionHandler，否則崩潰

WKScriptMessageHandler 重點來了，這是蘋果爸爸推薦使用的JS交互

以我目前的項目為例，我們是將 artproFunc當作了一個通道，所有的function都走message.body分發出來，所以會有switch case 解析 body中的method，然後再進行不同的方法分發。

最近研究JS和iOS native交互，偶然發現的庫發現github上用的人也不少,感覺還不錯的樣子，就研究了下使用方法

看起來很簡單的樣子

如何實現WebView和js頁面的交互

通過webView.addJavascriptInterface(Object, “name”);方法可以實現,其中參數Object表示的是需要與js交互的Java代碼所在的類的類名,而參數name則表示js頁面用來調用Java代碼時的別名.簡單來說就是將Java對象和Js對象進行綁定,通過別名可以找到與之關聯的Java對象.例如:

如何處理webview與js之間交互

先說說android中webview控制項如何調用javascript代碼？

其實android中webview控制項調用javascript方法還是比較簡單，只需要設置webview支持javascript，然後用loadUrl調用javascript方法即可。

javascript調用android中自定義好的方法(例如: 分享)

需要給webview控制項添加addJavascriptInterface方法，而這個就類似於初始化一個類對象，以及類對象里的方法。這個類對象就提供給javascript來調用。

javascript調用自定義好的JShare對象。

效果圖

WKWebView與JS的交互原理

寫的人比較多，自己親自寫一遍，記錄一下！

OC和Swift兩個版本，原理比較簡單，UI如下：

JS準備一個方法

OC: native去調用 videoPlay(videoUrl)

Swift: native去調用網頁方法 videoPlay(videoUrl)

比如JS需要調用native的 CallApp 方法，那麼在需要調用的地方寫法如下：

按照如下的方法初始化 WKWebView ， 調用 addScriptMessageHandler: name 方法，註冊 CallApp 方法，如下：

OC:

Swift:

在 webView 的UIDelegate代理中可以拿到響應

OC:

Swift:

感謝您閱讀完畢，如有疑問，歡迎添加QQ: 714387953 (蝸牛上高速)。

github :

如果有錯誤，歡迎指正，一起切磋，共同進步

如果喜歡可以 Follow、Star、Fork ，都是給我最大的鼓勵。