背景&＃xff1a;如果页面title是异步获取的数据&＃xff0c;那么拿到数据直接使用document.title会在ios低版本出现失效的问题&＃xff0c;因为页面加载完成后title被确定&＃xff0c;此后不再监听title的change事件
解决方法&＃xff1a;获取到数据后&＃xff0c;动态创建iframe标签&＃xff0c;src指向一个非常小的资源&＃xff0c;监听load事件&＃xff0c;加载完成立即删除即可更新title
代码&＃xff1a;
document.title &＃61; this.title;let iframe &＃61; document.createElement(&＃39;iframe&＃39;);iframe.src &＃61; require(&＃39;/favicon.ico&＃39;);iframe.style.display &＃61; &＃39;none&＃39;;let fn &＃61; function () {setTimeout(function () {iframe.removeEventListener(&＃39;load&＃39;, fn);document.body.removeChild(iframe);console.log(&＃39;title&＃39;, document.title);}, 0);};iframe.addEventListener(&＃39;load&＃39;, fn);document.body.appendChild(iframe);
原理&＃xff1a; iframe是内联框架元素&＃xff0c;可以将另一个html元素嵌入到当前页面&＃xff0c;当异步获取到数据后&＃xff0c;动态创建的iframe根据指定src发送请求&＃xff0c;从而触发title的监听&＃xff0c;加载完后移除不会对页面造成影响。
针对ios&＃xff1a;由于只是部分ios的微信浏览器有此现象&＃xff0c;所以不需要对所有设备进行此操作&＃xff0c;可进行判断
iphone8P 微信 useragent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/7.0.8(0x17000820) NetType/WIFI Language/zh_CN
var ua &＃61; navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)&＃61;&＃61;"micromessenger" && !!ua.match(/(i[^;]&＃43;;( U;)? CPU.&＃43;Mac OS X/i)){...iframe操作
}
该方案无法解决的问题&＃xff1a;
ios safari的地址栏显示域名&＃xff0c;无法通过此方法修改title
安卓部分野鸡浏览器&＃xff08;安卓低版本自带浏览器&＃xff09;显示的是完整url
如果你有解决方案&＃xff0c;欢迎讨论 :D
京公网安备 11010802041100号