轩枫阁

首页 / Web前端 / 移动前端 / H5 / 微信SPA单页面应用更换title

微信SPA单页面应用更换title

阅读：25796 评论：2 作者：ivan 分类：H5、移动前端

前言

SPA单页面应用在切换hash的时候，往往要更改页面标题，一般是通过document.title来设置。

1
2
3
4
5
// eg.1
document.title='new title'
 
//eg.2
document.getElementsByTagName('title')[0].innerHTML =  'new title'

以上方式在Android生效，但在IOS中是无法在页面不刷新时设置浏览器title的。

Demo

微信扫一扫：http://www.xuanfengge.com/demo/201604/wx_change_title.html

gfdgfdghf

Hack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//基于jQuery或Zepto
function change_title(title){
    document.title = title;
    // hack在微信等webview中无法修改document.title的情况
    var $iframe = $('<iframe src="/favicon.ico"></iframe>');
    $iframe.on('load',function() {
        setTimeout(function() {
            $iframe.off('load').remove();
        }, 0);
    }).appendTo($('body'));
}
 
$('#demo1').on('click', function(){
    change_title('demo1 title');
});
 
 
// 原生触发
function changeTitle(title){
    var body = document.getElementsByTagName('body')[0];
    document.title = title;
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "/favicon.ico");
 
    iframe.addEventListener('load', function() {
        setTimeout(function() {
            iframe.removeEventListener('load');
            document.body.removeChild(iframe);
        }, 0);
    });
    document.body.appendChild(iframe);
}
 
document.getElementById('demo2').ontouchend = function(){
    changeTitle('demo2 title');
}

标签：、

本文标题：微信SPA单页面应用更换title - 轩枫阁

转载请务必注明出处，欢迎分享

如果觉得我的文章对您有用，欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
78/470
80/470

相关阅读

文章评论

取消回复
  • hwhwzy

    我又来了博主，SPA单页面应用，用的路由是那个

    2016 年 10 月 12 日 上午 9:29
    • hwhwzy

      就是用别页面内容渲染主页的

      2016 年 10 月 12 日 上午 9:36

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间