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下修改標題失效問題分析