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