iOS 下實現 webview 標題修改

修改頁面標題？，用document.title不就好咯。emm..，並沒有這麼簡單，在iOS的webview中，這個方法未必行得通。之前在做一個支付寶相關的H5頁面便遇到這個問題，一起來看下吧~

原因分析

通常來講，iOS的原生webview（UIWebView或WKWebView）直接用document.title修改標題是不會生效的，要在頁面中修改其naviBar上的標題只有兩種方法能做到：

• 通過webview提供的jssdk進行修改
• 在webviewpageload事件回撥中，document.title修改會生效。。。

當然上面的限制是iOS的原生webview才有的，APP自身可以對webview做相容，比如微信（詳見iOS WKWebview 網頁開發適配指南）。

解決方案

考慮上面兩種種會觸發更新標題的方法，具體方案如下：

通過jssdk進行修改

這種方案依賴客戶端提供的jssdk，比如支付寶就提供了修改H5頁面標題欄的方法。

修改document.title，併傳送一個iframe請求

iframe也是一種文件物件，所以iframe的載入完成也能觸發webview的pageload事件，這樣webview就能實現對document.title的獲取、進而更新標題了。

具體程式碼如下：

function changeTitle(title) {
    document.title = title;
    let i = document.createElement('iframe');
    i.style.display = 'none';
    i.src = 'xxx'; // 載入當前頁面下一個體積小的資源，比如favicon.ico
    i.onload = ()=>{
        setTimeout(()=>{
            i.remove()
        }, 0);
    }
    document.body.appendChild(i);
}複製程式碼

這種方案通用性最好，不依賴具體的app。但缺點就是要再多傳送一個請求。

結論

iOS的webview存在無法通過document.title修改標題的坑，我們可以通過呼叫webview的jssdk、或者傳送iframe請求等來間接避開這個問題。

最後還是期待蘋果能填下這個坑，提供更好的開發體驗吧。

Ref

單頁應用(SPA)在Webview下修改標題失效問題分析