改變head中的 title 標籤+相容釘釘、微信
阿新 • • 發佈:2018-12-26
問題發現:
IOS11版本的釘釘,目前只使用更改title的時候有概率不生效,後續調研了下,出了JQuery和JS兩個版本的方便使用和貼上。目前除了釘釘以外,沒有找到不好的適配情況,PC端只使用初級的就可以。JS版本:document.title = title;
JQuery版本:
$(document).attr('title','新title名字'); // 將 title 的值改為 ‘新title名字’
解決釘釘問題升級版本(測試有效)
JS版本:
document.title = t; var i = document.createElement('iframe'); i.src = '//m.baidu.com/favicon.ico'; i.style.display = 'none'; i.onload = function() { setTimeout(function(){ i.remove(); }, 9) } document.body.appendChild(i);
JQuery版本:
var $body = $('body');
document.title = title;
var $iframe = $('<iframe style="display: none"></iframe>');
$iframe.on('load', function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0);
}).appendTo($body);
------ 2018 3.30 更新 --------
微信使用iframe會有問題:不會remove,造成底部有空隙和一塊留白,所以上面的程式碼中的iframe預設不展示
var $iframe = $('<iframe style="display: none"></iframe>');
codepen例子(由於codepen是iframe嵌入的,所以沒辦法做很好的展示,建議本地使用下)
程式碼參考連結(知乎):
原理參考:
詳解JavaScript中attribute和property的區別以及最佳實踐