iOS之UIWebView無法獲取web標題

最近遇到了一個問題，就是在UIWebView的代理方法裏，執行document.title的js代碼無法獲取網頁標題，代碼如下：

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // 取加載html文件的標題名
    NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}

出現這個問題，我首先確定是不是代碼的問題，經過分析，發現代碼沒有改動，但這次卻無法獲取網頁標題，甚是奇怪。經過查找分析，問題是在這一版中，前端人員把網頁的標題設置放在了異步操作裏，導致UIWebView在加載網頁完成後，在代理方法webViewDidFinishLoad:裏無法立即獲取標題，因爲獲取標題的方法是異步的，而網頁加載完就會調用該代理方法，那時候的網頁title還沒有值，所以獲取不到title的值。

下面是網頁異步獲取title的代碼，使用了jQuery和Ajax技術來異步獲取title：

    $.ajax({
        url: remoteur+'/api/innerMessageApi/noticeMessage.htm?callBackFunc=xx',
        type: 'get',
        dataType: 'jsonp',
        jsonpCallback:"xx",
        data: {msgId: msgId},

        success: function(res){
            console.log(res);
            if ( res.successFlag == 'Y' ){
                content = res.content;
                title   = res.title;
            }
        },
        complete:function(res){
            document.title = title;
            $('body').append(content);
        }
    })

出現這個問題的時候，恰是項目要上線的那天晚上，在集體加班時，遇到這個問題，感覺那一夜，被深深傷害。。。

好了，閒話不多說，下面來介紹解決辦法：

方法一

如果只是考慮iOS方面的解決方法，可能就是延時獲取title，具體就是在webViewDidFinishLoad:裏通過延時來執行document.title來獲取標題，雖然可以解決，但是有風險，因爲網頁獲取標題是異步的，而異步的時間就不確定，所以延時的時間也不確定，雖然可以加大延時的時間，但是不是完美的解決方法

   dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)),        dispatch_get_main_queue(), ^{
       self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
   });

方法二

如果考慮網頁端，可以把網頁中獲取title的異步操作改成同步操作，根據上述的js代碼，可以添加一個同步的字段async: false，修改後的網頁代碼如下：

    $.ajax({
        url: remoteur+'/api/innerMessageApi/noticeMessage.htm?callBackFunc=xx',
        type: 'get',
        dataType: 'jsonp',
        jsonpCallback:"xx",
        data: {msgId: msgId},
        // 設置同步操作
        async: false,

        success: function(res){
            // 同步設置標題
             document.title = res.title;
        complete:function(res){
            ...
        }
    })

雖然這樣可以解決該問題，但是依然不是很好的解決辦法，比如網頁在加載時，用同步的方式獲取網頁標題，假如同步操作被阻塞，那麼網頁加載就被阻塞，進而導致網頁無法展示，所以依然不是最優的解決方法。

方法三

如果把網頁端和iOS端結合起來，可以在網頁端異步獲取標題，在獲取到標題後通過js調用原生的方法來設置標題，這樣既可以不因同步獲取標題而阻塞網頁加載過程，也不會因延時獲取標題而造成延時時間無法確定的問題，所以該方法可以完美解決這個問題

js端代碼：

    $.ajax({
        url: remoteur+'/api/innerMessageApi/noticeMessage.htm?callBackFunc=xx',
        type: 'get',
        dataType: 'jsonp',
        jsonpCallback:"xx",
        data: {msgId: msgId},
        // 設置同步操作
        async: false,

        success: function(res){
            // 同步設置標題
            document.title = res.title;
            // js調用原生方法來設置標題
            setWebViewTitle(title); 
        complete:function(res){
            ...
        }
    })

iOS端代碼：

    context[@"setWebViewTitle"] = ^(){
       NSArray *args = [JSContext currentArguments];
       if (args.count == 1) {
            // 設置標題，只需要傳遞一個參數
            self.title = [args firstObject];
        }
    };

其實，js調用原生的方式很多，這裏只是一種比較簡單的方式，具體用哪種方式都是可以的，如果對這一塊的知識不甚瞭解，可以參考其它資料。

---

我找了網上許多的資料，發現動態修改網頁標題的大多都是同步操作，比較少介紹用異步操作動態修改標題的，所以我把動態設置標題的方法總結如上，希望給有需要的朋友一點幫助。