单页应用在iOS微信浏览器中如何优雅的设置title

Scliang 发布于2019-08-22 10:34 / 2795人阅读

摘要：最近用做了个微信应用，遇到了一个比较尴尬的问题。用设置，在返回时不会再重新设置。由于的微信浏览器使用原生的在路由返回后不能及时捕获的修改。封装设置的方法动态引入组件并设置统一管理切换城市在路由钩子中设置首页搞定收工。

最近用Vue2.0 SPA做了个微信应用，遇到了一个比较尴尬的问题。用document.title设置title，在返回时不会再重新设置title。

由于iOS的微信浏览器使用原生的title,在路由返回后不能及时捕获document.title的修改。

有一种hack的解决方案：在document里append一个空的iframe做伪请求，在修改完标题后进行remove。上代码。

封装设置title的方法

const titleUtil = {};

titleUtil.setTitle = (title) => {
    document.title = title;
    let ua = navigator.userAgent;
    if (/MicroMessenger/([d.]+)/.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
        var i = document.createElement("iframe");
        i.src = "/favicon.ico";
        i.style.display = "none";
        i.onload = () => {
            setTimeout(() => {
                i.remove();
            }, 9);
        };
        document.body.appendChild(i);
    }
};

export default titleUtil;

动态引入组件并设置meta,统一管理

{ 
  path: "/city_select", name: "city.select", component:  (resolve) => {
    require(["../components/page/fund/city.select"], resolve);
  } , meta: { title: "切换城市" } 
}

在路由钩子afterEach中设置title

router.afterEach((route) => {
  titleUtil.setTitle(route.matched[0].meta.title || "首页");
});

搞定收工。

如果有更好的方式希望各位不吝赐教。

云服务器 GPU云服务器在深度学习中的应用在php中按钮的设置机器学习在企业中的应用云主机在我们工作中的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90855.html

在单页应用中，如何优雅的监听url的变化

摘要：单页应用的原理从早起的根据的变化，到根据的的变化，实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听的变化呢，本文将总结一下，如何在单页页面中优雅的监听的变化。在下几章中，重点介绍一下如何监听的改变。单页应用的原理从早起的根据url的hash变化，到根据H5的history的变化，实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听url的变化呢，本文将总结一下，...

leap_frog 2019-08-30 15:55 评论0 收藏0
在单页应用中，如何优雅的监听url的变化

摘要：单页应用的原理从早起的根据的变化，到根据的的变化，实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听的变化呢，本文将总结一下，如何在单页页面中优雅的监听的变化。在下几章中，重点介绍一下如何监听的改变。单页应用的原理从早起的根据url的hash变化，到根据H5的history的变化，实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听url的变化呢，本文将总结一下，...

姘存按 2019-08-02 14:00 评论0 收藏0
在单页应用中，如何优雅的监听url的变化

摘要：单页应用的原理从早起的根据的变化，到根据的的变化，实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听的变化呢，本文将总结一下，如何在单页页面中优雅的监听的变化。在下几章中，重点介绍一下如何监听的改变。单页应用的原理从早起的根据url的hash变化，到根据H5的history的变化，实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听url的变化呢，本文将总结一下，...

zhkai 2019-08-23 14:23 评论0 收藏0
jssdk 在history模式下安卓不能调用图片上传接口和分享接口

摘要：配置先上配置每个页面都调用微信授权配置注是我在暴露的接口这份配置主要是根据微信公众号开发踩坑记录配置而来。首先说明，应用环境是使用的是vue+vue-router,history模式开发的单页应用。配置先上配置??? // index.js const protocol = location.protocol + // + location.host; router.afterE...

dkzwm 2019-08-22 15:37 评论0 收藏0
单页应用SPA开发最佳实践

摘要：最近用做了个单页应用的项目，页面大概有个左右。详见链接使用自定义事件的表单输入组件优雅解决的问题的问题由来已久，在单页应用中我们免不了需要处理这样的。最近用vue+vue-router做了个单页应用的项目，页面大概有15个左右。积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践全站的颜色定义放在一个less或者scss的文件里，其他组件和页面import...

mingzhong 2019-08-01 17:35 评论0 收藏0