详解如何让InstantClick兼容MathJax、百度统计等


Posted in Javascript onSeptember 12, 2017

之前有网友提及博客上的LaTex(由MathJax实现)坏掉了,其原因是这里使用了instantclick,以达到网页秒开的效果。但由于instantclick不会重新运行位于head部分的JavaScript代码,而很多工具性软件,比如MathJax、百度统计、Google Analytics、Google Code Prettify等软件都是直接将JS文件插入到head区域。这导致这些工具在instantclick点击后失效,需要重新配置。

配置并不复杂,这些工具本身的代码不用做任何修改,该怎么放还怎么放。但在InstantClick.init();之前添加以下代码:

<script data-no-instant>
InstantClick.on('change', function(isInitialLoad) {
 if (isInitialLoad === false) {
  if (typeof MathJax !== 'undefined') // support MathJax
   MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  if (typeof prettyPrint !== 'undefined') // support google code prettify
   prettyPrint();
  if (typeof _hmt !== 'undefined') // support 百度统计
   _hmt.push(['_trackPageview', location.pathname + location.search]);
  if (typeof ga !== 'undefined') // support google analytics
    ga('send', 'pageview', location.pathname + location.search);
 }
});
InstantClick.init();
</script>

这段代码的含义是每次页面重载时,通过直接的函数调用来实现MathJax、百度统计、Google Code Prettify、Google Analytics的重新运行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 #Javascript
VueJs组件prop验证简单介绍
Sep 12 #Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 #Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 #Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 #Javascript
JavaScript中递归实现的方法及其区别
Sep 12 #Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 #Javascript
You might like
域名和cookie问题(域名后缀)
2012/10/10 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
php二维码生成
2015/10/19 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
JS上传前预览图片实例
2013/03/25 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
canvas实现钟表效果
2017/02/13 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
基于python requests库中的代理实例讲解
2018/05/07 Python
Python I/O与进程的详细讲解
2019/03/08 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python实现最速下降法
2020/03/24 Python
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
会计自荐信范文
2014/03/09 职场文书
年检委托书
2014/08/30 职场文书
民事赔偿协议书
2014/11/02 职场文书
鉴史问廉观后感
2015/06/10 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
TS 类型兼容教程示例详解
2022/09/23 Javascript
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers