anki里的JS坑以及填坑方案

garypang

5 e% ^0 c/ j* k& v/ e% @以下只针对PC下的ANKI

$ {. o! q8 P$ m3 B% \8 L; Y不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/1280253613
但只针对anki2的, anki2.1还是没办法,
不用插件行不行呢,
首先得弄清楚为啥会出现这个问题,
% t. `7 T9 Q6 E% f0 f& _ANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如
9 X) ~( k/ O) C

1. document.body.click(...)
   
2. $(window).keyup(...)
   : V* {: O# l- D3 b
3. $(window).scroll(...)
   * l1 n6 K3 x" r9 |1 d; V1 d% P
4. $("html,body").animate(...)
   
5. ...
   ( N( K! D& Y. p2 o& G( c  a- d

复制代码

举个栗子

1. $("body").click(function(){
   
2. alert("test");
   : ]6 e7 O4 K, E% V5 J% D5 h
3. })

复制代码

浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题
5 t" L0 \4 u3 G! C
解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.
% C' u! v& r; [+ Q
% w. c# M7 e# Z; Y% [比如上述代码可以这样写:

游客，如果您要查看本帖隐藏内容请回复

( ]6 G1 t  \7 J* R+ ?
另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.

0 O5 l# ~! y% b/ \2 i( w可以这样写

1. var script = document.createElement('script');
   : _- J6 @  o8 S7 l5 ]1 e# {
2. script.type = "text/javascript";
   
3. script.src = "_jquery.js";
   ! _3 X% |0 k7 @9 e+ {
4. document.getElementById("ak_wrap").appendChild(script);

复制代码

6 W* s/ t- ^$ L2 p' \3 r这里特别注意,一不小心就会踩了上面那个坑,代码第四行你肯定会想当然用document.body.appendChild(script)吧,前面刚说了document.body对象里的JS会被重复执行,这样写后果就是到第二张卡片的时候就会出现两个<script src="_jquery.js"></script>, _jquery.js被调用了两次,正确的写法是append到除body, html外的其他元素里.

- m, P1 n+ d& h. B以上, 希望对你有帮助

展开全文

gurock69

技术贴，学习了。

gurock69

评论不行，还要回复？。

ywgyf

9 I9 l, t* L# s) C! F* N
真是个高手，不去微软可惜了

coco_huangke

楼主好功夫,非常希望学习ANKI的高级技巧，特别是javascript的技巧

weird

学习技术，这个问题很恼人，在anki里最好还是用最简单的卡片。

梦里寻剑

谢谢楼主分享

梦里寻剑

目前每次加载新卡片时WebView不会刷新（见GitHub），导致用WordQuery从mdx中提取的内容的JS动态效果用不了。
我在macOS端和AnkiDroid端尝试过，均有此问题。
- D; E3 K1 M; O" n: t0 u请问楼主这个问题目前有办法解决么？

haoduodianying

谢谢楼主分享

aaboss6

感谢分享

dicarne

研究研究

tsehiuming

技术贴，学习了。

zheng1zhi1

试试看

互动英语e

2020年1月了，看看最新版解决了没

lasdfp

被困扰很久了

只是开始

anki的back页面不需要用script导入jquery，我看程序文件里面包含了一个jquery.js的文件不需要导入就可以直接使用。楼主的这个回答刚好解决了我这几天纠结的问题，我遇到了js动态插入iframe换页不会消失的问题，感谢楼主

coolfish2019

谢谢楼主，帮助我提前预习该知识

1904711967

谢谢楼主分享学习技术

庄之白

感谢楼主

wilen

谢谢楼主分享这么好的心得！

amerrynurse

技术干货，感谢分享

apple666wang

观摩大神技术贴