详解如何让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 键盘事件的几个基本方法
Oct 30 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 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配置心得包含MYSQL5乱码解决
2006/11/20 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
php目录操作实例代码
2014/02/21 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
php验证session无效的解决方法
2014/11/04 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JavaScript中this详解
2015/09/01 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
详解Python中的type()方法的使用
2015/05/21 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
python实现批量图片格式转换
2020/06/16 Python
python使用matplotlib画饼状图
2018/09/25 Python
python区块及区块链的开发详解
2019/07/03 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
机电一体化自荐信
2013/12/10 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
合作经营协议书范本
2014/04/17 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
社会工作专业自荐信
2014/09/26 职场文书
作风整顿剖析材料
2014/09/30 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
责任书范本大全
2015/05/11 职场文书
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript