改变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>');



扫描二维码关注公众号,回复: 2662834 查看本文章


codepen例子(由于codepen是iframe嵌入的,所以没办法做很好的展示,建议本地使用下)

https://codepen.io/CandyQiu/pen/NybZLV?editors=1010






代码参考链接(知乎):

https://www.zhihu.com/question/26228251


原理参考:

详解JavaScript中attribute和property的区别以及最佳实践

http://joji.me/zh-cn/blog/html-attribute-vs-dom-property

猜你喜欢

转载自blog.csdn.net/Candy_home/article/details/79291372