基本实现思路:
- 将一个包含JavaScript的POST请求的HTML代码放到工程目录中
- 加载这个包含JavaScript的POST请求的代码到WKWebView
- 加载完成之后,用Native调用JavaScript的POST方法并传入参数来完成请求
- 创建包含JavaScript的POST请求的HTML代码
相关代码:
<html>
<head>
<script>
//调用格式: post('URL', {"key": "value"});
function post(path, params) {
var method = "post";
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
</script>
</head>
<body>
</body>
</html>
将这段代码拷贝下来,然后粘贴到文本编辑器中,名字可以随意起,比如保存为:JSPOST.html,然后拷贝到工程目录中,记得选择对应的Target和勾选Copy items if needed(默认应该是勾选的)。这时候,就可以用这段JavaScript代码来发送带参数的POST请求了。
将对应的JavaScript代码通过加载本地网页的形式加载到WKWebView
=======OC代码:=======
// JS发送POST的Flag,为真的时候会调用JS的POST方法(仅当第一次的时候加载本地JS) self.needLoadJSPOST = YES;
// 创建WKWebView
self.webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
//设置代理
self.webView.navigationDelegate = self;
// 获取JS所在的路径
NSString *path = [[NSBundle mainBundle] pathForResource:@"JSPOST" ofType:@"html"];
// 获得html内容
NSString *html = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
// 加载js
[self.webView loadHTMLString:html baseURL:[[NSBundle mainBundle] bundleURL]];
// 将WKWebView添加到当前View
[self.view addSubview:self.webView];
======Swift代码:=======
// JS发送POST的Flag,为真的时候会调用JS的POST方法(仅当第一次的时候加载本地JS)
needLoadJSPOST = true
// 创建WKWebView
webView = WKWebView(frame: UIScreen.mainScreen().bounds)
//设置代理
webView.navigationDelegate = self
// 获取JS路径
let path = NSBundle.mainBundle().pathForResource("JSPOST", ofType: "html")
// 获得html内容
do {
let html = try String(contentsOfFile: path!, encoding: NSUTF8StringEncoding)
// 加载js
webView.loadHTMLString(html, baseURL: NSBundle.mainBundle().bundleURL)
} catch { }
// 将WKWebView添加到当前View
view.addSubview(webView)
这段代码就相当于把工程中的JavaScript脚本加载到WKWebView中了,后面就是看怎么用了。(请注意换成您的文件名)
Native调用JavaScript脚本并传入参数来完成POST请求
还记得 WKWebView和JavaScript的交互这一节嘛?现在该Native调用JavaScript了,如果忘记了,请往前翻温故一下:- webView:didFinishNavigation:代理表明页面已经加载完成,我们在这里操作,下面上代码:
=======OC代码:=======
// 加载完成的代理方法
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
// 判断是否需要加载(仅在第一次加载)
if (self.needLoadJSPOST) {
// 调用使用JS发送POST请求的方法
[self postRequestWithJS];
// 将Flag置为NO(后面就不需要加载了)
self.needLoadJSPOST = NO;
}
}
// 调用JS发送POST请求
- (void)postRequestWithJS {
// 发送POST的参数
NSString *postData = @"\"username\":\"aaa\",\"password\":\"123\"";
// 请求的页面地址
NSString *urlStr = @"http://www.postexample.com";
// 拼装成调用JavaScript的字符串
NSString *jscript = [NSString stringWithFormat:@"post('%@', {%@});", urlStr, postData];
// NSLog(@"Javascript: %@", jscript);
// 调用JS代码
[self.webView evaluateJavaScript:jscript completionHandler:^(id object, NSError * _Nullable error) {
}];
}
=======Swift代码:=======
// 加载完成的代理方法
func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) {
// 判断是否需要加载(仅在第一次加载)
if needLoadJSPOST {
// 调用使用JS发送POST请求的方法
postRequestWithJS()
// 将Flag置为NO(后面就不需要加载了)
needLoadJSPOST = false
}
}
// 调用JS发送POST请求
func postRequestWithJS() {
// 发送POST的参数
let postData = "\"username\":\"aaa\",\"password\":\"123\""
// 请求的页面地址
let urlStr = "http://www.postexample.com"
// 拼装成调用JavaScript的字符串
let jscript = "post('\(urlStr)', {\(postData)});"
// 调用JS代码
webView.evaluateJavaScript(jscript) { (object, error) in
}
}
结束.