掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 3624|回复: 29

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

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

    [LV.6]常住居民II

    发表于 2018-5-20 16:46:00 | 显示全部楼层 |阅读模式
    本帖最后由 garypang 于 2018-5-20 19:10 编辑
    ' E+ p' |9 a4 Q  c* p1 b
    ) [. `" n7 [5 r以下只针对PC下的ANKI
    ' o! g" @: n2 h! V% Z6 m& R* @3 X0 j) P5 c; `) k% @+ }
    不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/12802536131 K0 c9 m0 ~* L
    但只针对anki2的, anki2.1还是没办法,
    5 V+ r9 p. ]; ]5 Q. N$ h不用插件行不行呢,3 X: }% Z9 q* e& o* Q5 M* ~# g
    首先得弄清楚为啥会出现这个问题,- f" r7 T3 D) w& d" |: i7 O! _
    ANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如
    8 E: Q* R; J, q
    1. document.body.click(...)
      # x5 m. l, Z  j( y1 r
    2. $(window).keyup(...)
      , C6 ^" s7 k0 M! y' z
    3. $(window).scroll(...)
      + h" y% k# k* u
    4. $("html,body").animate(...)8 J6 o0 h! L) m' r/ {: l
    5. ...
      5 |+ d$ Q' p8 l7 q
    复制代码

    " o3 p' f4 p" N! }举个栗子
    - E' I! g' A5 P' E! ]  P
    1. $("body").click(function(){# J! g5 f4 ~; M0 u/ A0 h2 ^" |
    2. alert("test");; R' {$ i3 G7 j: @9 J6 P2 w1 W
    3. })
    复制代码

    3 ]3 |2 J- T1 t3 {; f$ Z浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题( y: [3 _" f- M; _* V9 X9 Q

    6 Z9 H% {' i5 j1 x3 K' o) N解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.4 s, b& g, ^# i/ T1 E! N- L

    ; l; y5 r. y  p比如上述代码可以这样写:
    & m$ U! ?+ ]0 d; g5 h
    游客,如果您要查看本帖隐藏内容请回复
    3 n$ H" z6 b, N1 d/ ]% R9 M2 f8 d( ~
    5 |8 R9 k* [8 d: L/ |: P
    另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.
    5 N# {2 x" w# Z5 s8 E: _: z
    & A0 N! n0 ]0 m0 M) S  g可以这样写) }8 q$ n" f9 M& f
    1. var script = document.createElement('script');
      ) f: |/ A% [( V6 i; Y
    2. script.type = "text/javascript";* a( [) s0 A. |( o6 |! B8 Y& s) I6 r
    3. script.src = "_jquery.js";
      # c) b" W8 ^7 k2 k5 T. E# O
    4. document.getElementById("ak_wrap").appendChild(script);
    复制代码

    3 ]" n3 w1 o: j, }& f" t. A4 ?% L这里特别注意,一不小心就会踩了上面那个坑,代码第四行你肯定会想当然用document.body.appendChild(script)吧,前面刚说了document.body对象里的JS会被重复执行,这样写后果就是到第二张卡片的时候就会出现两个<script src="_jquery.js"></script>, _jquery.js被调用了两次,正确的写法是append到除body, html外的其他元素里." ]' N4 V5 m- V2 P% M: U; l

    % u4 U/ X. n; ^" B. K8 X" j' f以上, 希望对你有帮助

    评分

    2

    查看全部评分

    本帖被以下淘专辑推荐:

    该用户从未签到

    发表于 2020-2-7 20:51:12 | 显示全部楼层
    anki的back页面不需要用script导入jquery,我看程序文件里面包含了一个jquery.js的文件不需要导入就可以直接使用。楼主的这个回答刚好解决了我这几天纠结的问题,我遇到了js动态插入iframe换页不会消失的问题,感谢楼主
  • TA的每日心情

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

    [LV.2]偶尔看看I

    发表于 2018-9-18 17:51:02 | 显示全部楼层
    目前每次加载新卡片时WebView不会刷新(见GitHub),导致用WordQuery从mdx中提取的内容的JS动态效果用不了。7 t  e+ s- K; t: j% j2 p, z$ N
    我在macOS端和AnkiDroid端尝试过,均有此问题。2 D+ |* G- M, p+ Y$ L
    请问楼主这个问题目前有办法解决么?

    该用户从未签到

    发表于 2018-6-16 11:03:46 | 显示全部楼层
    楼主好功夫,非常希望学习ANKI的高级技巧,特别是javascript的技巧

    该用户从未签到

    发表于 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 编辑
    ' M: g$ ]" w' i4 p+ _
    3 `# n6 L# E3 S; F真是个高手,不去微软可惜了
  • 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的每日心情
    擦汗
    2020-6-6 16:10
  • 签到天数: 164 天

    [LV.7]常住居民III

    发表于 2019-4-15 10:21:19 | 显示全部楼层
    谢谢楼主分享
  • TA的每日心情
    无聊
    2021-4-10 17:54
  • 签到天数: 168 天

    [LV.7]常住居民III

    发表于 2019-7-11 00:45:01 | 显示全部楼层
    技术贴,学习了。
  • TA的每日心情

    2021-4-9 14:15
  • 签到天数: 134 天

    [LV.7]常住居民III

    发表于 2020-1-18 17:38:40 | 显示全部楼层
    2020年1月了,看看最新版解决了没
  • TA的每日心情
    开心
    2021-8-9 14:57
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2020-1-19 14:33:05 | 显示全部楼层
    被困扰很久了
  • TA的每日心情
    开心
    2020-2-18 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    发表于 2020-2-12 23:15:11 | 显示全部楼层
    谢谢楼主,帮助我提前预习该知识
  • TA的每日心情
    开心
    2021-8-24 18:53
  • 签到天数: 433 天

    [LV.9]以坛为家II

    发表于 2020-2-28 19:45:14 | 显示全部楼层
    谢谢楼主分享学习技术
  • TA的每日心情
    无聊
    2021-6-16 06:36
  • 签到天数: 71 天

    [LV.6]常住居民II

    发表于 2020-3-16 06:34:56 | 显示全部楼层
    谢谢楼主分享这么好的心得!
  • TA的每日心情
    开心
    2021-4-14 18:35
  • 签到天数: 92 天

    [LV.6]常住居民II

    发表于 2020-4-21 16:22:52 | 显示全部楼层
    技术干货,感谢分享
  • TA的每日心情
    郁闷
    2021-1-9 15:32
  • 签到天数: 106 天

    [LV.6]常住居民II

    发表于 2020-5-9 14:03:17 | 显示全部楼层
    观摩大神技术贴
  • TA的每日心情
    奋斗
    1 小时前
  • 签到天数: 788 天

    [LV.10]以坛为家III

    发表于 2020-5-29 02:08:43 | 显示全部楼层
    感谢大佬分享经验!

    该用户从未签到

    发表于 2021-1-29 19:49:29 | 显示全部楼层
    感谢楼主,完美解决了我的问题
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

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

    小黑屋|手机版|Archiver|PDAWIKI ( 美ICP 0000000字 )|网站地图

    GMT+8, 2021-9-17 15:24 , Processed in 0.046701 second(s), 14 queries , MemCache On.

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

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