最近遇到了一個問題,就是在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調用原生的方式很多,這裡只是一種比較簡單的方式,具體用哪種方式都是可以的,如果對這一塊的知識不甚了解,可以參考其它資料。
我找了網上許多的資料,發現動態修改網頁標題的大多都是同步操作,比較少介紹用異步操作動態修改標題的,所以我把動態設置標題的方法總結如上,希望給有需要的朋友一點幫助。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持本站。