[swift]-使用JavaScript解决WKWebView无法发送POST参数问题

最新推荐文章于 2022-01-26 11:38:30 发布

转载最新推荐文章于 2022-01-26 11:38:30 发布 · 763 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/xiaoLoo/blog/1843791

文章标签：

#swift #javascript #python #ViewUI

本文介绍如何利用WKWebView结合JavaScript实现iOS应用内的POST请求，包括创建HTML文件、加载至WKWebView及通过Native调用JavaScript完成请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

基本实现思路:

将一个包含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

    }
}

结束.

转载于:https://my.oschina.net/xiaoLoo/blog/1843791