webview交互js,webview html5

本文目錄一覽：

• 1、iOS下webView和JS交互
• 2、iOS中WkWebView與js交互
• 3、android中webview與js交互

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上用的人也不少,感覺還不錯的樣子，就研究了下使用方法

看起來很簡單的樣子

iOS中WkWebView與js交互

1、初始化wkwebview

2、獲取js返回的信息

3、原生調用js方法

4、攔截url（可在此方法中實現判斷url執行相應的oc方法）：js會嘗試載入某個URL，客戶端在載入前攔截這個URL，通過解析這個URL識別它的內容，調用相應的原生方法，並阻止瀏覽器載入這個URL

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();\

}\

}