详解如何让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 在线压缩和格式化收藏
Jan 16 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
js快速排序的实现代码
Dec 08 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
jquery实现全屏滚动
Dec 28 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
小程序实现图片预览裁剪插件
Nov 22 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+redis实现商城秒杀功能
2020/11/19 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JavaScript中的闭包
2016/02/24 Javascript
基于node实现websocket协议
2016/04/25 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python中super()函数简介及用法分享
2016/07/11 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python烟花效果的代码实例
2020/02/25 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
班级心理活动总结
2014/07/04 职场文书
新闻学专业求职信
2014/07/28 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
行政介绍信范文
2015/05/04 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
Redis实现短信验证码登录的示例代码
2022/06/14 Redis
MySQL导致索引失效的几种情况
2022/06/25 MySQL
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS