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下修改标题失效问题分析