webviewjs发请求（webview的网络请求）

发布时间：2023-12-08

webviewjs发请求（webview的网络请求）

更新：2022-11-12 06:57

本文目录一览：

  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 协议，代理是由 WKUserContentController 设置。 
    // 通过接收 JS 传出消息的 name 进行捕捉的回调方法
- (void)userContentController:(WKUserContentController *)userContentController
    didReceiveScriptMessage:(WKScriptMessage *)message {
    NSLog(@"name:%@, body:%@, frameInfo:%@", 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 {
    [SVProgressHUD dismiss];
    NSString* jsStr = [NSString stringWithFormat:@"payResult('%@')", @"true"];
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError* _Nullable error) {
        NSLog(@"==%@----%@", result, error);
    }];
}

webview 与 js 怎样实现数据交互

对于 Android 初学者应该都了解 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 能做什么？

  • 利用 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;
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() {}
        public void clickOnAndroid() {
            mHandler.post(new Runnable() {
                public void run() {
                    mWebView.loadUrl("javascript:wave()");
                }
            });
        }
    }
    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

<script language="javascript">
function wave() {
    alert("1");
    document.getElementById("droid").src="android_waving.png";
    alert("2");
}
</script>
<body>
<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>

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/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 里面需要区别 Android 和 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.destroy();
    }
}

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 对象。 效果图

推荐文章