// vue-wechat-title 源码 (function () { // 插件安装钩子 function install (Vue) { var setWechatTitle = function (title, img) { if (title === undefined || window.document.title === title) { return } // 修改 title document.title = title var mobile = navigator.userAgent.toLowerCase() // 兼容性判断 if (/iphone|ipad|ipod/.test(mobile)) { // 创建空的 iframe，触发 onload 事件 var iframe = document.createElement('iframe') iframe.style.display = 'none' // 替换成站标favicon路径或者任意存在的较小的图片即可 iframe.setAttribute('src', img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') // onload 回调函数 var iframeCallback = function () { setTimeout(function () { // 卸磨杀驴 iframe.removeEventListener('load', iframeCallback) document.body.removeChild(iframe) }, 0) } // 定义事件 iframe.addEventListener('load', iframeCallback) document.body.appendChild(iframe) } } // 定义全局指令， Vue.directive('wechat-title', function (el, binding) { // update 钩子，调用 title 修改函数 setWechatTitle(binding.value, el.getAttribute('img-set') || null) }) } if (typeof exports === 'object') { module.exports = install } else if (typeof define === 'function' && define.amd) { define([], function () { return install }) } else if (window.Vue) { Vue.use(install) } })()
由于微信浏览器只在onload 事件中通过 title 的值初始化标题，而后续的 title 修改，无法触发标题的修改。既然 onload 事件能够通过 title 修改标题，那么我创建一个空的 iframe 触发 onload 事件修改了标题后就移除它。这种方式根据 title 修改了标题，并且没有对页面造成额外的影响。
众所周知，vue-wechat-title 通过 v-wechat-title 指令来触发 title 的动态修改，每当指令的值修改后，触发 update 钩子中的回调函数——setWechatTitle。该函数通过前面提到的兼容性处理，实现了document.title 对标题的修改。
总结
以上所述是小编给大家介绍的Vue 中 title 的动态修改问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: