掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 1253|回复: 12

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

[复制链接]
  • TA的每日心情
    慵懒
    2018-8-25 12:29
  • 签到天数: 91 天

    [LV.6]常住居民II

    发表于 2018-5-20 16:46:00 | 显示全部楼层 |阅读模式
    本帖最后由 garypang 于 2018-5-20 19:10 编辑
    ! H4 ]$ k* d. ?" P5 @
    5 I8 s+ M- ]. Q- O0 Y以下只针对PC下的ANKI
    6 Y: E: Z. h, \) X7 O* X6 N* c. U* k7 @3 M
    不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/1280253613! x! c* o% X& S, p/ U
    但只针对anki2的, anki2.1还是没办法,
    - z1 u$ C" }) {( S( q4 O- N# K不用插件行不行呢,& G/ `1 D8 d) H' w% r: E2 A! Y
    首先得弄清楚为啥会出现这个问题,
    $ b* H0 n4 A- n; f9 n6 aANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如( ?5 {+ h! x+ K
    1. document.body.click(...)- W+ ?) d9 q! w5 M" y; k
    2. $(window).keyup(...)' M. ~9 S/ q, k# ?4 \& [
    3. $(window).scroll(...)
      - Z+ s8 X( t) h( m8 N5 ^
    4. $("html,body").animate(...)0 R& c% R2 J9 e* ~0 o, V" F
    5. ...
      ' f( e8 ~. N1 O: V% ^% i: ?
    复制代码

    1 D8 \) a/ c; P+ a% }; h举个栗子
    * g6 J0 K) D  V
    1. $("body").click(function(){3 s8 u) N4 Z% G0 h4 D  z
    2. alert("test");0 c8 \2 g- m( F; A
    3. })
    复制代码
    , p- d/ D8 j# e2 E/ D
    浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题8 Y1 t; l2 @7 I" P
    * h# }$ V% \. c* |8 V: `
    解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.
    2 _: [9 f* \: g9 u1 D5 l
    - d- s9 {9 m: r" u" G7 |8 l$ l3 ]% j* n比如上述代码可以这样写:; C" V3 U1 ]. F# x  R
    游客,如果您要查看本帖隐藏内容请回复
    9 h/ [+ j7 l+ A& @! s( H8 t1 c9 g1 G. e
    ) K, U: }$ t8 g6 ^& Y
    另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.
    % o$ |6 K" p2 [5 s) D
    & K7 w! I: Z1 L/ Y可以这样写* J% z/ R/ A9 c7 F8 L/ P: {; }! N
    1. var script = document.createElement('script');& O6 R' Z) a" l" U
    2. script.type = "text/javascript";; m/ H! v/ }; h& x0 H3 z( I
    3. script.src = "_jquery.js"; / l0 Z: P0 |$ Y2 z9 \9 X
    4. document.getElementById("ak_wrap").appendChild(script);
    复制代码

    . g" b' u5 S% f+ I( [这里特别注意,一不小心就会踩了上面那个坑,代码第四行你肯定会想当然用document.body.appendChild(script)吧,前面刚说了document.body对象里的JS会被重复执行,这样写后果就是到第二张卡片的时候就会出现两个<script src="_jquery.js"></script>, _jquery.js被调用了两次,正确的写法是append到除body, html外的其他元素里.
    % J# B7 @9 T) y. \! i+ T/ K
    : C6 r4 @* e5 Q- a" |+ S, z以上, 希望对你有帮助

    评分

    2

    查看全部评分

    本帖被以下淘专辑推荐:

    该用户从未签到

    发表于 2018-5-21 10:39:00 来自手机 | 显示全部楼层
    技术贴,学习了。

    该用户从未签到

    发表于 2018-5-21 10:40:25 来自手机 | 显示全部楼层
    评论不行,还要回复?。
  • TA的每日心情

    2018-6-15 17:23
  • 签到天数: 19 天

    [LV.4]偶尔看看III

    发表于 2018-5-31 15:40:55 | 显示全部楼层
    本帖最后由 ywgyf 于 2018-5-31 15:42 编辑
    5 b9 e/ `; L2 @1 x# P! j3 C2 H+ \+ n0 k+ J; a
    真是个高手,不去微软可惜了

    该用户从未签到

    发表于 2018-6-16 11:03:46 | 显示全部楼层
    楼主好功夫,非常希望学习ANKI的高级技巧,特别是javascript的技巧
  • TA的每日心情
    开心
    2018-6-18 09:03
  • 签到天数: 110 天

    [LV.6]常住居民II

    发表于 2018-6-17 08:19:04 | 显示全部楼层
    学习技术,这个问题很恼人,在anki里最好还是用最简单的卡片。
  • TA的每日心情

    2018-9-22 15:41
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    发表于 2018-8-18 23:09:16 | 显示全部楼层
    谢谢楼主分享
  • TA的每日心情

    2018-9-22 15:41
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    发表于 2018-9-18 17:51:02 | 显示全部楼层
    目前每次加载新卡片时WebView不会刷新(见GitHub),导致用WordQuery从mdx中提取的内容的JS动态效果用不了。
    6 Y! I; v* |$ f4 s我在macOS端和AnkiDroid端尝试过,均有此问题。
    7 U4 f% e$ X9 @! t7 z8 f请问楼主这个问题目前有办法解决么?
  • TA的每日心情
    擦汗
    2019-9-2 10:57
  • 签到天数: 64 天

    [LV.6]常住居民II

    发表于 2019-4-15 10:21:19 | 显示全部楼层
    谢谢楼主分享
  • TA的每日心情
    开心
    2019-10-3 08:24
  • 签到天数: 163 天

    [LV.7]常住居民III

    发表于 2019-7-11 00:45:01 | 显示全部楼层
    技术贴,学习了。
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    顶部qrcode底部
    关注公众号送论坛充值码
    关注微信公众平台
    关注微信公众号 pdawiki,获取邀请码,看文抢积分,抽奖得浮云! Follow our Wechat official account "pdawiki", get invitation codes, and play the lottery to earn points (积分)!

    小黑屋|手机版|Archiver|PDAWIKI |网站地图

    GMT+8, 2019-10-19 00:33 , Processed in 0.181863 second(s), 11 queries , MemCache On.

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表