ios如何动态改变title

Posted 2020-08-17 JcScript

刚刚用vue发现document.title=title在ios上并不能动态改变title（iphone上的微信端）,但是在电脑上和安卓手机上却没有问题，仔细查了一下原来是ios存在title不刷新的问题基本的解决方法是：

基于：jquery

var $body = $(‘body‘)
document.title = ‘title’
var $iframe = $(‘<iframe src="/favicon.ico"></iframe>‘).on(‘load‘, function() {
  setTimeout(function() {
    $iframe.off(‘load‘).remove()
  }, 0)
}).appendTo($body)

原生js：

var body = document.getElementsByTagName(‘body‘)[0];
        document.title = title;
        var iframe = document.createElement("iframe");
        iframe.style.display="none";
        iframe.setAttribute("src", "http://named.cn/page/take/img/icon_phone.png");
        var d = function() {
          setTimeout(function() {
            iframe.removeEventListener(‘load‘, d);
            document.body.removeChild(iframe);
          }, 0);
        };
        iframe.addEventListener(‘load‘, d);
        document.body.appendChild(iframe);

这样我们就解决了ios中title不刷新的问题，我们其实就是新建了一个iframe元素，通过hack的方式来刷新title。

其实ios和安卓上还有很多大大小小的bug，对于移动端研究了一番，比如说在用zepto的时候存在的tap失效问题，ios上的tap失效其实很鬼畜，具体解决方法：

cursor：pointer；

只需要给绑定的元素添加这行变小手的代码tap在ios上失效问题就解决了。

在其次就是移动端的点击穿透问题，当一个页面和另一个页面的两个点击链接重合时候，有可能点击第一个页面到第二个页面之后又自动点击，解决的方法就是在点击之后跳转之前取消了当前点击事件，是不是很鬼畜呢？