单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title。常规做法如下,可惜在iOS微信浏览器无效。

问题原因:

因为微信浏览器首次加载页面初始化title后,就再也不监听 document.title的change事件。

解决方案:

修改title之后,给页面加上一个内容为空的iframe,随后立即删除这个iframe,这时候会刷新title。但是如果简单的这样设置,一般是会有闪动的,所以可以设置

方法一:

完整代码:

  1. document.title = '设置标题HTTP';
  2. const iframe = document.createElement('iframe');
  3. iframe.style.cssText = 'display: none; width: 0; height: 0;';
  4. iframe.src = 'http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/05/0F/ChMkJ1erCriIJ_opAAY8rSwt72wAAUU6gMmHKwABjzF444.jpg';
  5. //iframe.src = require('./img/text_delete.png');
  6. const listener = () => {
  7. setTimeout(() => {
  8. iframe.removeEventListener('load', listener);
  9. setTimeout(() => {
  10. document.body.removeChild(iframe);
  11. }, 0);
  12. }, 0);
  13. };
  14. iframe.addEventListener('load', listener);
  15. document.body.appendChild(iframe);

方法二:

封装了一个只在IOS的状态下处理的方法:

setDocumentTitle = function(title) {
document.title = title;
if (/ip(hone|od|ad)/i.test(navigator.userAgent)) {
var i = document.createElement('iframe');
i.src = '/favicon.ico';
i.style.display = 'none';
i.onload = function() {
setTimeout(function(){
i.remove();
}, 9)
}
document.body.appendChild(i);
}
}

用document.title=“xxx”动态修改title,在ios的微信下面不生效的更多相关文章

  1. 用document.title=“xxx”动态修改title,在ios的微信下面不生效的解决办法!

    //需要jQuery var $body = $('body'); document.title = 'title'; // hack在微信等webview中无法修改document.title的情况 ...

  2. 聊聊 Vue 中 title 的动态修改

    由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一 ...

  3. vue单页面应用中动态修改title

    https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...

  4. vue-wechat-title动态修改title

    在使用Vue制作项目的过程中,发现title没有变化 所以使用vue-wechat-title插件动态修改tilte 一.安装 npm vue-wechat-title --save 二.引入和使用 ...

  5. 微信小程序动态修改title,动态配置title,动态配置头部,微信小程序动态配置头部

    微信小程序的title是在json里面配置的 "navigationBarTitleText": "title名称" 这种title是固定死的不灵活处理一些页面 ...

  6. js动态修改title

    问题描述: 由于微信浏览器只在页面首次加载时初始化了标题title,之后就没有再监听 window.title的change事件.所以这里修改了title后,立即创建一个请求,加载一个空的iframe ...

  7. 在vue中如何动态修改title标签的值

    建议用vue-wechat-title插件为微信动态设置标题 1,首先安装插件 cnpm install vue-wechat-title --save 2,在main.js中引入 Vue.use(r ...

  8. vue动态修改title

    1.项目中,cmd下 ,运行:cnpm install vue-wechat-title --save 2.在 main.js 中,设置: import VueWechatTitle from 'vu ...

  9. Vue动态修改网页标题

    业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...

随机推荐

  1. Codeforces Round #361 div2

    ProblemA(Codeforces Round 689A): 题意: 给一个手势, 问这个手势是否是唯一. 思路: 暴力, 模拟将这个手势上下左右移动一次看是否还在键盘上即可. 代码: #incl ...

  2. 9个Java性能优化工具汇总

    本文来自blog.idrsolutions.com 1.NetBeans profiler NetBeans Profiler是一个模块化的添加,为NetBeans IDE提供分析功能,它是一个开源的 ...

  3. 练习-libev和pyev示例

    事件循环,IO复用,还是理解深刻一点好. 比较LIBEV和PYEV,发现PYTHON库只是对LIBEV作了简单的语法转换. 到了这个层次,就一个字:DIAO!!! libev的C版: #include ...

  4. 编码问题 关于hibernate jdbc数据库连接在xml配置与在properties文件配置的差异

    在properties中,&字符不需要转义,因此在连接数据库的时候使用编码的地方直接使用&即可: driverClass=com.mysql.jdbc.Driver jdbcUrl=j ...

  5. iOS开发UI篇—Quartz2D简单使用(一)

    iOS开发UI篇—Quartz2D简单使用(一) 一.画直线 代码: 1 // 2 // YYlineview.m 3 // 03-画直线 4 // 5 // Created by apple on ...

  6. easyui源码翻译1.32--Tabs(选项卡)

    前言 使用$.fn.tabs.defaults重写默认值对象.下载该插件翻译源码 选项卡显示一批面板.但在同一个时间只会显示一个面板.每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他 ...

  7. ANDROID_MARS学习笔记_S02_006_APPWIDGET3_AppWidget发送广播及更新AppWidget

    一.简介 二.代码1.xml(1)example_appwidget.xml <?xml version="1.0" encoding="utf-8"?& ...

  8. KXFW界面库

    如果你看到这里,觉得这个UI库不错,那请你一定要记住如下这些话.这个开源已经有更好的替代者,那就是QML,无法否认QML会有一些性能或BUG的问题,但也无法否定它的实现机制是非常棒的,你完全可以利用它 ...

  9. ActionBar官方教程(8)ShareActionProvider与自定义操作项提供器

    Adding an Action Provider Similar to an action view, an action provider replaces an action button wi ...

  10. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.2.2

    Show that the following statements are equivalent: (1). $A$ is positive. (2). $A=B^*B$ for some $B$. ...