JS动态修改IOS手机微信浏览器中的title标题

2016/8/16 21:28:25 人评论 次浏览 分类:服务号开发


问题描述:
在微信公众号开发的时候想要在网页加载之后动态的修改手机微信浏览器中的标题title,一般的在PC浏览器中用 document.title="title***"; 的方式就可以实现,动态的修改浏览器中的标题title,在安卓手机上的微信浏览器是可以实现动态修改手机微信浏览器中的标题title, 但是最终发现在IOS手机(iphone 手机)通过设置document.title的方式无法实现修改动态修改手机微信浏览器中的标题title,只能寻求别的方式实现。

实现原理:
JS动态修改IOS手机微信浏览器中的title我们的原理是,微信浏览器的title在页面首次加载完成后就初始化了标题title,之后没有再监听 window.title的change事件,所以使用document.title=的方式无法生效。因而在修改document.title之后应该立即创建一个请求加载一个空的iframe,在空的iframe的加载后立即就移除,这样就激活了window.title的change事件,微信浏览器上的title就可以刷新。这样的方式,因为创建隐藏的空的iframe所以对原来页面不会造成影响,同时也实现JS动态修改手机微信浏览器中的title标题的效果。

代码示例:
    <script>
        var $body = $('body');
        document.title = 'the title you want to set';
        var $iframe = $("<iframe style='display:none;' src='/favicon.ico'></iframe>");
        $iframe.on('load', function() {
            setTimeout(function() {
                $iframe.off('load').remove();
            }, 0);
        }).appendTo($body);
    </script>

相关资讯

共有访客发表了评论 网友评论

验证码: 看不清楚?