剛剛用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上失效問題就解決了。
在其次就是移動端的點擊穿透問題,當一個頁面和另一個頁面的兩個點擊鏈接重合時候,有可能點擊第一個頁面到第二個頁面之后又自動點擊,解決的方法就是在點擊之后跳轉之前取消了當前點擊事件,是不是很鬼畜呢?