正美着准备下班了，突然一个 bug 砸到脸上。。。

有这么一个页面，它的页面标题是可在后台配置的，前端正常显示标题即可。话说，这个需求小的不能再小了，上线也快半年了，应该不会有什么问题。直到有一天，运营妹子反馈，这个标题怎么没有更新呢？我？？？？

2020-09-15 更新
如果这个页面也需要在小程序中，iframe 中设置的图标 url 要配置 webview 域名校验

原因

原因很快就排查到了，当页面在 iOS中的 webview中显示时，标题设置失效了，而在微信端和安卓端是没有问题的。

document.title = '标题';

正常情况下，我们都是这样设置标题的，而在 iOS的 webview中加载页面时，设置 document.title并不起作用，因为标题栏是原生的，需要调用原生设置标题的方法才可以，那前端就没有办法了吗？

解决

其实，多测试几次我们可以发现，iOS第一次加载页面的时候，标题没有生效，但是再刷新一下当前页面，你会发现标题又生效了，这是不是给了我们一点点的启发？

没错， iOS webview 仅在加载页面的时候才能读取到 document.title，所以页面加载之后使用 js再设置 document.title是根本不会起作用的。。。那么我们是不是可以使用点手段来触发 webview加载而又不影响当前页面呢？

来了， iframe

没错，就是 iframe，虽然很多时候，我们对 iframe嗤之以鼻，但真的遇到问题的时候，还是老大哥靠谱。

iframe是内联框架，也是一种文档对象，于是我们可以：**加载一个不可见的 iframe，并利用它来触发 webview的加载，从而读取到我们设置的 document.title**。

function isIOS() {
	var ua = navigator.userAgent.toLowerCase();
	if (/iphone|ipad|ipod/.test(ua)) {
		return true;
	} else if (/android/.test(ua)) {
		return false;
	}
}

function setDocumentTitle(title = '标题') {
	document.title = title; // 设置标题
	if (isIOS()) {
		// 创建空的 iframe，触发 onload 事件
		const iframe = document.createElement('iframe');
		iframe.style.display = 'none';
		iframe.setAttribute(
			'src',
			'url', // 搞个小点的图标
		);
		// onload 回调函数
		const onIframeLoad = function () {
			setTimeout(function () {
				// 加载完之后，删除 iframe
				iframe.removeEventListener('load', onIframeLoad);
				document.body.removeChild(iframe);
			}, 0);
		};
		iframe.addEventListener('load', onIframeLoad);
		document.body.appendChild(iframe);
	}
}

总结

遇到这个问题的时候，也搜索了不少博客，很多人(包括同事)说在 WKWebView 下面不会有这个问题，只在 UIWebView上才会有。但是我们的 app中，使用的一直都是 WK，还是会有发生标题失效的问题。不管怎么说，适合自己的就是最好的。bug解决了，可以下班了不是吗？