详解如何让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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
javascript处理table表格的代码
Dec 06 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
JavaScript实现多文件下载方法解析
Aug 07 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP实现八皇后算法
2019/05/06 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
JS前端笔试题分析
2016/12/19 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python FTP操作类代码分享
2014/05/13 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python微信操控itchat的方法
2019/05/31 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
护理专业自荐信范文
2014/02/26 职场文书
安全责任书范文
2014/03/12 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
钱学森电影观后感
2015/06/04 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android