详解如何让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实现左右div自适应高度完全相同的代码
Aug 09 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
几种tab切换详解
Feb 03 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
vue实现移动端input上传视频、音频
Aug 18 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 IN_ARRAY 函数使用注意事项
2010/07/24 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
解析PHP提交后跳转
2013/06/23 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
Prototype String对象 学习
2009/07/19 Javascript
javascript实用方法总结
2015/02/06 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
深入理解Vuex 模块化(module)
2017/09/26 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
Python3.x对JSON的一些操作示例
2017/09/01 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
计算机专业毕业生自我鉴定
2014/01/16 职场文书
七年级音乐教学反思
2014/01/26 职场文书
高级销售求职信
2014/02/21 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
golang中的struct操作
2021/11/11 Golang
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers