iOS APP与H5交互的三种方法

html-css021

iOS APP与H5交互的三种方法,第1张

这种方法是利用拦截webView响应的url，对url进行处理，同时把需要执行的方法名和参数都放入url中，实现app和H5之前的方法交互：

这个属性是WKWebView才有的属性，主要是通过WKScriptMessageHandler的代理方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 进行交互。

注意：

这两个方法是成对出现的，每次调用了add就必须调用remove。

1.建立 WebViewJavaScriptBridge 和 WebView 之间的关系。

_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView]

2.方法调用

1)oc调js方法（通过data可以传值，通过 response可以接受js那边的返回值 ）

2)js调oc方法（可以通过data给oc方法传值，使用responseCallback将值再返回给js）

最后：iOS调用H5方法

UIWebView： NSString *result = [webView stringByEvaluatingJavaScriptFromString:@"javascript:add(3,5)"]

WKWebView: [self.webView evaluateJavaScript:@"show()" completionHandler:^(id _Nullable response, NSError * _Nullable error) { //TODO }]

　IOS中webview与JS交互的代码:

[webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script')"

"script.type = 'text/javascript'"

"script.text = \"function myFunction() { "

"var field = document.getElementsByName('word')[0]"

"field.value='测试'"

"document.forms[0].submit()"

"}\""

"document.getElementsByTagName('head')[0].appendChild(script)"]

[webView stringByEvaluatingJavaScriptFromString:@"myFunction()"]

上面的代码是把JS代码写入到html网页中，然后执行函数，实现JS中的功能。

通过 stringByEvaluatingJavaScriptFromString 函数，可以实现webview强大的交互功能。

//①ji与android交互

//js调用android方法

window.类.方法名称(参数1,参数2)

//android调用js方法(loginIn:方法名称，uname:参数)

//activity.loadUrl("javascript:loginIn('" + uname + "')")

//②js与ios交互

//js调用ios方法(objc:协议)

window.location.href='objc://方法名称|参数1|参数2'

//ios调用js方法：

同android

其中：android的activity如下：

@Override

public void onCreate(Bundle savedInstanceState) {

// setFullScreen(true)

Intent intent = new Intent(getApplicationContext(),

SplashActivity.class)

startActivity(intent)

super.onCreate(savedInstanceState)

super.init()

// Set by <content src="index.html" /> in config.xml

activity = this

// this.appView.setBackgroundResource(R.drawable.welcome)// 设置背景图片

//

// super.setIntegerProperty("splashscreen", R.drawable.welcome)

// 设置闪屏背景图片

// super.setBooleanProperty(name, value)

// super.loadUrl("这里是html页面的路径")

super.appView.addJavascriptInterface(new Fu(), "这里是类名(js中需要通过这个类名访问android方法)")

super.loadUrl(Config.getStartUrl())

// super.loadUrl("file:///android_asset/www/index.html")

// mController.openShare(activity, false)

// try {

// getToken()

// } catch (NoSuchAlgorithmException e) {

// // TODO Auto-generated catch block

// //e.printStackTrace()

// }

}