vue 动态设置页面标题那点儿事

本文最后更新于:2020年9月17日 上午

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

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

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

原因

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

document.title = '标题';

正常情况下,我们都是这样设置标题的,而在 iOSwebview中加载页面时,设置 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解决了,可以下班了不是吗?


 目录