anki里的JS坑以及填坑方案

garypang · 发表于 2018-5-20 16:46:00

本帖最后由 garypang 于 2018-5-20 19:10 编辑

以下只针对PC下的ANKI

不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/1280253613
但只针对anki2的, anki2.1还是没办法,
不用插件行不行呢,
首先得弄清楚为啥会出现这个问题,
ANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如

document.body.click(...)
+ E9 e) k! } W3 ^
$(window).keyup(...)) A! m: [! e7 G; c3 [
$(window).scroll(...)
7 V0 ], n4 K+ T+ d) s
$("html,body").animate(...)
$ B3 [1 V$ G+ J% p! F* p
...
- k' \+ z" @. n1 p

复制代码

举个栗子

$("body").click(function(){/ Q l, T& B1 f0 o: @; o
alert("test");
2 V- \5 ~% u* R1 { ]
})

复制代码

浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题

解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.

比如上述代码可以这样写:

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

另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.

可以这样写

var script = document.createElement('script');
2 k! H% T# c0 G x" O6 i
script.type = "text/javascript";
" h4 \: U3 h, I6 f# q2 m
script.src = "_jquery.js"; 2 q- Z7 k; N, r: S8 o
document.getElementById("ak_wrap").appendChild(script);

复制代码

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

以上, 希望对你有帮助

只是开始 · 发表于 2020-2-7 20:51:12

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

梦里寻剑 · 发表于 2018-9-18 17:51:02

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

coco_huangke · 发表于 2018-6-16 11:03:46

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

gurock69 · 发表于 2018-5-21 10:39:00

技术贴，学习了。

gurock69 · 发表于 2018-5-21 10:40:25

评论不行，还要回复？。

ywgyf · 发表于 2018-5-31 15:40:55

本帖最后由 ywgyf 于 2018-5-31 15:42 编辑

真是个高手，不去微软可惜了

weird · 发表于 2018-6-17 08:19:04

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

梦里寻剑 · 发表于 2018-8-18 23:09:16

谢谢楼主分享

haoduodianying · 发表于 2019-4-15 10:21:19

谢谢楼主分享

aaboss6 · 发表于 2019-4-17 16:17:37

感谢分享

dicarne · 发表于 2019-6-16 14:14:34

研究研究

tsehiuming · 发表于 2019-7-11 00:45:01

技术贴，学习了。

zheng1zhi1 · 发表于 2019-7-22 15:27:41

试试看

互动英语e · 发表于 2020-1-18 17:38:40

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

lasdfp · 发表于 2020-1-19 14:33:05

被困扰很久了

coolfish2019 · 发表于 2020-2-12 23:15:11

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

1904711967 · 发表于 2020-2-28 19:45:14

谢谢楼主分享学习技术

庄之白 · 发表于 2020-3-6 20:18:52

感谢楼主

wilen · 发表于 2020-3-16 06:34:56

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

amerrynurse · 发表于 2020-4-21 16:22:52

技术干货，感谢分享

apple666wang · 发表于 2020-5-9 14:03:17

观摩大神技术贴

xusorn · 发表于 2020-5-29 02:08:43

感谢大佬分享经验！

wxjj · 发表于 2021-1-29 19:49:29

感谢楼主，完美解决了我的问题

Lianlin · 发表于 2021-3-6 17:45:28

谢谢楼主

		自动登录	找回密码
密码			免费注册

[经验交流] anki里的JS坑以及填坑方案

评分

本帖被以下淘专辑推荐: