1. 程式人生 > >改變head中的 title 標籤+相容釘釘、微信

改變head中的 title 標籤+相容釘釘、微信

問題發現:

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的區別以及最佳實踐