苹果手机 浏览器中修改vue单页面的title

Question

最近在弄一个h5的项目，使用vue的框架，但是遇到一个小麻烦，页面的title如何修改，经过查询：

/* 路由发生变化修改页面title */
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
    // 如果是 iOS 设备，则使用如下 hack 的写法实现页面标题的更新
    // if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
    //   const hackIframe = document.createElement('iframe');
    //   hackIframe.style.display = 'none';
    //   hackIframe.src = '/static/html/fixIosTitle.html?r=' + Math.random();
    //   document.body.appendChild(hackIframe);
    //   setTimeout(_ => {
    //     document.body.removeChild(hackIframe)
    //   }, 300)
    // }
    // var iframe = document.createElement('iframe');
    // iframe.style.visibility = 'hidden'; 
    // iframe.style.width = '1px'; 
    // iframe.style.height = '1px'; 
    // iframe.onload = function () { 
    //     setTimeout(function () {
    //         document.body.removeChild(iframe); 
    //     }, 0); 
    // }; 
    // document.body.appendChild(iframe);
  }
  next()
});

如上代码，测算如下
安卓手机，微信+浏览器，都ok
苹果手机，微信浏览器ok，自带的safari浏览器，显示的是ip地址

Answer 1

之前用的代码跟你差不多，可以试一下

var $body = $('body')
var $iframe = $('<iframe src="/favicon.ico" width="1px" height="1px" style="display:none;"></iframe>')
$iframe.on('load',function() {
    setTimeout(function() {
        $iframe.off('load').remove();
    }, 0)
}).appendTo($body)

Answer 2

楼主这个问题解决了吗?今天也遇到了这个问题,在safari 上显示的是网址,不是title