刚刚用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上失效问题就解决了。
在其次就是移动端的点击穿透问题,当一个页面和另一个页面的两个点击链接重合时候,有可能点击第一个页面到第二个页面之后又自动点击,解决的方法就是在点击之后跳转之前取消了当前点击事件,是不是很鬼畜呢?