详解如何让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 在firebug调试时用console.log的方法
May 10 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
用js实现in_array的方法
Nov 05 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
webpack+express实现文件精确缓存的示例代码
Jun 11 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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
php图片裁剪函数
2018/10/31 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
const和static readonly区别
2013/05/20 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
教师现实表现材料
2014/02/14 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android