详解如何让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 concat数组累加 示例
Sep 03 Javascript
javascript 自动填写表单的实现方法
Apr 09 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 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生成静态页面详解
2006/11/19 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
python简单商城购物车实例代码
2018/03/15 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
django之自定义软删除Model的方法
2019/08/14 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
会计专业自荐信
2013/12/02 职场文书
外国人聘用意向书
2014/04/01 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书