详解如何让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 相关文章推荐
Javascript 继承实现例子
Aug 12 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
javascript中var的重要性分析
Feb 11 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
JS数组属性去重并校验重复数据
Jan 10 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
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
js简易版购物车功能
2017/06/17 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python测试线程应用程序过程解析
2019/12/31 Python
如何使用python切换hosts文件
2020/04/29 Python
用python对oracle进行简单性能测试
2020/12/05 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
如何查找网页漏洞
2016/06/22 面试题
六十大寿答谢词
2014/01/12 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
技术入股合作协议书
2014/10/07 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript