用document.title=“xxx”动态修改title,在ios的微信下面不生效
单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title。常规做法如下,可惜在iOS微信浏览器无效。
问题原因:
因为微信浏览器首次加载页面初始化title后,就再也不监听 document.title的change事件。
解决方案:
修改title之后,给页面加上一个内容为空的iframe,随后立即删除这个iframe,这时候会刷新title。但是如果简单的这样设置,一般是会有闪动的,所以可以设置
方法一:
完整代码:
- document.title = '设置标题HTTP';
- const iframe = document.createElement('iframe');
- iframe.style.cssText = 'display: none; width: 0; height: 0;';
- iframe.src = 'http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/05/0F/ChMkJ1erCriIJ_opAAY8rSwt72wAAUU6gMmHKwABjzF444.jpg';
- //iframe.src = require('./img/text_delete.png');
- const listener = () => {
- setTimeout(() => {
- iframe.removeEventListener('load', listener);
- setTimeout(() => {
- document.body.removeChild(iframe);
- }, 0);
- }, 0);
- };
- iframe.addEventListener('load', listener);
- 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的微信下面不生效的更多相关文章
- 用document.title=“xxx”动态修改title,在ios的微信下面不生效的解决办法!
//需要jQuery var $body = $('body'); document.title = 'title'; // hack在微信等webview中无法修改document.title的情况 ...
- 聊聊 Vue 中 title 的动态修改
由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一 ...
- vue单页面应用中动态修改title
https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...
- vue-wechat-title动态修改title
在使用Vue制作项目的过程中,发现title没有变化 所以使用vue-wechat-title插件动态修改tilte 一.安装 npm vue-wechat-title --save 二.引入和使用 ...
- 微信小程序动态修改title,动态配置title,动态配置头部,微信小程序动态配置头部
微信小程序的title是在json里面配置的 "navigationBarTitleText": "title名称" 这种title是固定死的不灵活处理一些页面 ...
- js动态修改title
问题描述: 由于微信浏览器只在页面首次加载时初始化了标题title,之后就没有再监听 window.title的change事件.所以这里修改了title后,立即创建一个请求,加载一个空的iframe ...
- 在vue中如何动态修改title标签的值
建议用vue-wechat-title插件为微信动态设置标题 1,首先安装插件 cnpm install vue-wechat-title --save 2,在main.js中引入 Vue.use(r ...
- vue动态修改title
1.项目中,cmd下 ,运行:cnpm install vue-wechat-title --save 2.在 main.js 中,设置: import VueWechatTitle from 'vu ...
- Vue动态修改网页标题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
随机推荐
- Linux下相关查找文件命令(find locate which whereis type)
以下内容摘自:http://blog.csdn.net/jessica1201/article/details/8139249 标注的内容为自己的补充: 我们经常需要在系统中查找一个文件,那么在lin ...
- BZOJ 4004 [JLOI 2015] 装备购买 解题报告
哎这个题 WA 了无数遍...果然人太弱... 首先我们把这些装备按照花费从小到大排序,然后依次考虑是否能买这个装备. 至于这样为什么是对的,好像有一个叫拟阵的东西可以证明,然而我不会.TATQAQ ...
- PHP漏洞全解(七)-Session劫持
本文主要介绍针对PHP网站Session劫持.session劫持是一种比较复杂的攻击方法.大部分互联网上的电脑多存在被攻击的危险.这是一种劫持tcp协议的方法,所以几乎所有的局域网,都存在被劫持可能. ...
- SpeedPHP关于一对一和一对多关联关系的建立 model建立
新闻表:t_news 新闻类型表:b_type_to_name 其中一个新闻类型可以包含多个新闻(hasmany),一个新闻只能属于一种新闻类型(hasone) 下面是新闻model类: <?p ...
- 【POJ1182】 食物链 (带权并查集)
Description 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到 ...
- Maven如何手动添加jar包到本地Maven仓库
Apache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(缩写:POM)概念,Maven利用一个中央信息片断能管理一个项目的构 ...
- 九度 链表中倒数第k个结点
/* * a.cpp * * Created on: 2013-10-7 * Author: wangzhu */ #include<cstdio> #include<iostrea ...
- Node.js tools for visual studio 在vs中使用Node.js
简单介绍 PTVS开发团队又开发出一款可以在VS里编写Node.js应用程序的插件——NTVS(Node.js Tools for Visual Studio),开发者可以在VS里轻松开发Node.j ...
- Drawable(3)Color State List Resource
注意 Color State List Resource 与 Color不同,前者是颜色状态表.根据不同状态显示不同颜色,它是State list,里面有多种颜色,后者只是一个颜色. Color St ...
- 九九乘法口诀引申出NN乘法口诀
package com.tfj.function; import java.util.Scanner; public class NNTable { public void method1(int n ...