webviewjs發請求（webview的網絡請求）

本文目錄一覽：

• 1、WKWebView js方法的使用
• 2、webview 與js怎樣實現數據交互
• 3、android中webview與js交互
• 4、UIWebView怎麼攔截到網頁裏面JS發起的Ajax請求
• 5、如何處理webview與js之間交互

WKWebView js方法的使用

一、h5 調用 OC，給OC傳值

   1、在WKWebview初始化的時候，先註冊JS方法

       //這個類主要用來做native與JavaScript的交互管理

       WKUserContentController * wkUController = [[WKUserContentController alloc] init];

        //註冊一個name為jsToOcNoPrams的js方法，設置處理接收JS方法的代理

        [wkUController addScriptMessageHandler:self  name:@”jsToOcNoPrams”];

       [wkUController addScriptMessageHandler:self name:@”jsToOcWithPrams”];

        config.userContentController = wkUController;

2、攔截js方法，接收參數

注意：遵守WKScriptMessageHandler協議，代理是由WKUserContentControl設置

  //通過接收JS傳出消息的name進行捕捉的回調方法

– (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

    NSLog(@”name:%@\\\\n body:%@\\\\n frameInfo:%@\\\\n”,message.name,message.body,message.frameInfo);

    //用message.body獲得JS傳出的參數體

    NSDictionary * parameter = message.body;

    //JS調用OC

    if([message.name isEqualToString:@”jsToOcNoPrams”]){

        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@”js調用到了oc” message:@”不帶參數” preferredStyle:UIAlertControllerStyleAlert];

        [alertController addAction:([UIAlertAction actionWithTitle:@”OK” style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

        }])];

        [self presentViewController:alertController animated:YES completion:nil];

    }else if([message.name isEqualToString:@”jsToOcWithPrams”]){

        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@”js調用到了oc” message:parameter[@”params”] preferredStyle:UIAlertControllerStyleAlert];

        [alertController addAction:([UIAlertAction actionWithTitle:@”OK” style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

        }])];

        [self presentViewController:alertController animated:YES completion:nil];

    }

}

3、在webview釋放註銷之前移除js方法

      //移除註冊的js方法

        [[_webView configuration].userContentController removeScriptMessageHandlerForName:@”jsToOcNoPrams”];

二、oc調用H5，給H5傳值

1、//OC調用JS changeColor()是JS方法名，completionHandler是異步回調block

    NSString *jsString = [NSString stringWithFormat:@”changeColor(‘%@’)”, @”Js參數”];

    [_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) {

        NSLog(@”改變HTML的背景色”);

    }];

//改變字體大小 調用原生JS方法

    NSString *jsFont = [NSString stringWithFormat:@”document.getElementsByTagName(‘body’)[0].style.webkitTextSizeAdjust= ‘%d%%'”, arc4random()%99 + 100];

    [_webView evaluateJavaScript:jsFont completionHandler:nil];

2、// 頁面加載完成之後調用

– (void)webView:(WKWebView*)webView didFinishNavigation:(WKNavigation*)navigation{

    [SVProgressHUDdismiss];

NSString* jsStr = [NSStringstringWithFormat:@”payResult(‘%@’)”,@”true”];

[self.webView evaluateJavaScript:jsStrcompletionHandler:^(id_Nullable result,NSError* _Nullable error) {

NSLog(@”==%@—-%@”,result, error);

    }];

}

webview 與js怎樣實現數據交互

對於android初學者應該都了解webView這個組件。之前我也是對其進行了一些簡單的了解，但是在一個項目中不得不用webview的時候，發現了webview的強大之處，今天就分享一下使用webview的一些經驗。

1、首先了解一下webview。

webview介紹的原文如下：A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

從上面你應該了解到了基本功能，也就是顯示網頁。之所以我說webview功能強大是因為它和js的交互非常方便，很簡單就可以實現。

2、webview能做什麼？

①webView可以利用html做界面布局，雖然目前還比較少人這麼使用，不過我相信當一些客戶端需要複雜的圖文（圖文都是動態生成）混排的時候它肯定是個不錯的選擇。

②直接顯示網頁，這功能當然也是它最基本的功能。

③和js交互。（如果你的js基礎比java基礎好的話那麼採用這種方式做一些複雜的處理是個不錯的選擇）。

3、如何使用webview？

這裡直接用一個svn上取下的demo，先上demo後講解。demo的結構圖如下：

WebViewDemo.java

package com.google.android.webviewdemo;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.util.Log;

import android.webkit.JsResult;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

/**

* Demonstrates how to embed a WebView in your activity. Also demonstrates how

* to have javascript in the WebView call into the activity, and how the activity

* can invoke javascript.

* p

* In this example, clicking on the android in the WebView will result in a call into

* the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code

* will turn around and invoke javascript using the {@link WebView#loadUrl(String)}

* method.

* p

* Obviously all of this could have been accomplished without calling into the activity

* and then back into javascript, but this code is intended to show how to set up the

* code paths for this sort of communication.

*

*/

public class WebViewDemo extends Activity {

private static final String LOG_TAG = “WebViewDemo”;

private WebView mWebView;

private Handler mHandler = new Handler();

@Override

public void onCreate(Bundle icicle) {

super.onCreate(icicle);

setContentView(R.layout.main);

mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

webSettings.setSavePassword(false);

webSettings.setSaveFormData(false);

webSettings.setJavaScriptEnabled(true);

webSettings.setSupportZoom(false);

mWebView.setWebChromeClient(new MyWebChromeClient());

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), “demo”);

mWebView.loadUrl(“”);

}

final class DemoJavaScriptInterface {

DemoJavaScriptInterface() {

}

/**

* This is not called on the UI thread. Post a runnable to invoke

* loadUrl on the UI thread.

*/

public void clickOnAndroid() {

mHandler.post(new Runnable() {

public void run() {

mWebView.loadUrl(“javascript:wave()”);

}

});

}

}

/**

* Provides a hook for calling “alert” from javascript. Useful for

* debugging your javascript.

*/

final class MyWebChromeClient extends WebChromeClient {

@Override

public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

Log.d(LOG_TAG, message);

result.confirm();

return true;

}

}

}

demo.html

html

script language=”javascript”

/* This function is invoked by the activity */

function wave() {

alert(“1”);

document.getElementById(“droid”).src=”android_waving.png”;

alert(“2”);

}

/script

body

!– Calls into the javascript interface for the activity —

a onClick=”window.demo.clickOnAndroid()”div style=”width:80px;

margin:0px auto;

padding:10px;

text-align:center;

border:2px solid #202020;”

img id=”droid” src=”android_normal.png”/br

Click me!

/div/a

/body

/html

main.xml

LinearLayout xmlns:android=””

android:orientation=”vertical”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

TextView

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:text=”@string/intro”

android:padding=”4dip”

android:textSize=”16sp”

/

WebView

android:id=”@+id/webview”

android:layout_width=”fill_parent”

android:layout_height=”0dip”

android:layout_weight=”1″

/

/LinearLayout

4、如何交互？

①android如何調用js。

調用 形式：

mWebView.loadUrl(“javascript:wave()”);

其中wave（）是js中的一個方法，當然你可以把這個方法改成其他的方法，也就是android調用其他的方法。

②js如何調用android。

調用形式：

a onClick=”window.demo.clickOnAndroid()”

代碼中的「demo」是在android中指定的調用名稱，即

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), “demo”);

代碼中的clickOnAndroid()是「demo」對應的對象：new DemoJavaScriptInterface() 中的一個方法。

③雙向交互。

當然是把前面的兩種方式組合一下就可以了。

5、講解demo。

現在你一定了解了android和js的交互了。是時候分析一些demo了，根據上面講的你也應該比較清楚了。具體交互流程如下：

①點擊圖片，則在js端直接調用android上的方法clickOnAndroid()；

②clickOnAndroid()方法（利用線程）調用js的方法。

③被②調用的js直接控制html。

個人總結：利用webView的這種方式在有些時候UI布局就可以轉成相應的html代碼編寫了，而html布局樣式之類有DW這樣強大的工具，而且網上很多源碼，很多代碼片。在UI和視覺效果上就會節省很多時間，重複發明輪子沒有任何意義。

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

}\

}

UIWebView怎麼攔截到網頁裏面JS發起的Ajax請求

目前iOS與JS通信貌似只有兩種方法：用webView的stringByEvaluatingJavaScriptFromString:方法主動獲取，或者是shouldStartLoadWithRequest:回調被動接受，似乎沒有其他的方式了 。由於Ajax沒有刷新當前頁面，所以shouldStartLoadWithRequest回調不會被執行，這種情況只能通過修改web的代碼來解決，思

路是改變頁面的window.location，把自己需要的參數放在url里，在Ajax執行的時候去修改window.location

如何處理webview與js之間交互

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

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

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

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

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

效果圖