详解如何让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 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
js中判断控件是否存在
Aug 25 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
使用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中动态显示签名和ip原理
2007/03/28 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
9种改善AngularJS性能的方法
2017/11/28 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
python针对excel的操作技巧
2018/03/13 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
Python FFT合成波形的实例
2019/12/04 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
股东合作协议书
2014/09/12 职场文书
表扬稿格式范文
2015/01/16 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书