[swift]-使用JavaScript解決WKWebView沒法發送POST參數問題

時間 2019-11-07

標籤 swift 使用 javascript 解決 wkwebview 沒法發送 post 參數問題欄目 Swift 简体版

原文原文鏈接

基本實現思路:html

將一個包含JavaScript的POST請求的HTML代碼放到工程目錄中
加載這個包含JavaScript的POST請求的代碼到WKWebView
加載完成以後，用Native調用JavaScript的POST方法並傳入參數來完成請求
建立包含JavaScript的POST請求的HTML代碼

相關代碼：web

<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請求了。swift

將對應的JavaScript代碼經過加載本地網頁的形式加載到WKWebViewapp

=======OC代碼：=======編輯器

// JS發送POST的Flag，爲真的時候會調用JS的POST方法（僅當第一次的時候加載本地JS） self.needLoadJSPOST = YES;post

// 建立WKWebViewlua

self.webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];url

//設置代理代理

self.webView.navigationDelegate = self;code

// 獲取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

    }
}

結束.