详解如何让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 撑出页面文字换行
Jun 15 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
vue实现搜索功能
May 28 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 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
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
详解Python编程中time模块的使用
2015/11/20 Python
如何在Python中编写并发程序
2016/02/27 Python
scrapy爬虫实例分享
2017/12/28 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
个人自我鉴定怎么写
2013/10/28 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
物控部经理职务说明书
2014/02/25 职场文书
公司股权转让协议书
2014/04/12 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
庆六一宣传标语
2014/10/08 职场文书
违纪检讨书范文
2015/01/27 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技